如何制作带有标志的语言选择器按钮？ （HTML JS）

Question

我正在尝试在 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>

原文由 rootbot 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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>

原文由 ROOT 发布，翻译遵循 CC BY-SA 4.0 许可协议