如何制作带有标志的语言选择器按钮？（html + js）[关闭]答案

【问题标题】：How to make a languages selector button with flag? (html + js) [closed]如何制作带有标志的语言选择器按钮？（html + js）[关闭]
【发布时间】：2020-06-21 16:19:19
【问题描述】：

我正在尝试使用 HTML 和 JS 中的标志制作一个语言选择器按钮，但我得到的结果与我在此处找到的示例不匹配：https://codepen.io/brapastor/pen/BWyomB 选择器选择器有效，但标志和外观不起作用。请问我做错了什么？

 <select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>

<script type='text/javascript'> $(function(){
    $('.selectpicker').selectpicker();
});</script>

【问题讨论】：

好像你可能错过了这个的 CSS 部分

标签： javascript jquery html button

【解决方案1】：

根据您附加的代码笔，您需要包含一些样式表，如下所示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">

同时添加以下脚本，

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>
    $(function(){
        $('.selectpicker').selectpicker();
    });
</script>

【讨论】：

你说的很对，你的观点也很好。我确实添加了脚本和样式表，但它仍然不起作用。我将样式放在标题中，将脚本放在正文中，但外观保持不变。有什么想法吗？

【解决方案2】：

关闭脚本标签：

<script type='text/javascript'>
$(function(){
    $('.selectpicker').selectpicker();
});
</script>

【讨论】：

对不起，我只是在我的帖子中犯了这个错误，但在我的代码中没有。我会编辑我的帖子。

【解决方案3】：

Codepen 允许从外部源添加 CSS 和 Javascript 库，除非您单击设置/齿轮链接以公开它们，否则这些库是不可见的，以下是您应该如何包含它们：

$(function(){
  $('.selectpicker').selectpicker();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
</select>

【讨论】：