如何制作带有标志的语言选择器按钮？（html+js）

Question

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

\n\n

 <select class="selectpicker" data-width="fit">\n    <option data-content=\'<span class="flag-icon flag-icon-us"></span> English\'>English</option>\n  <option  data-content=\'<span class="flag-icon flag-icon-mx"></span> Espa\xc3\xb1ol\'>Espa\xc3\xb1ol</option>\n

\n\n

\n\n

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

\n

Answer 1

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

\n\n

\r\n

\r\n

$(function(){\r\n  $(\'.selectpicker\').selectpicker();\r\n});

\r\n

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">\r\n\r\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">\r\n\r\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css">\r\n\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`\r\n<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>\r\n\r\n<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>\r\n\r\n<select class="selectpicker" data-width="fit">\r\n    <option data-content=\'<span class="flag-icon flag-icon-us"></span> English\'>English</option>\r\n  <option  data-content=\'<span class="flag-icon flag-icon-mx"></span> Espa\xc3\xb1ol\'>Espa\xc3\xb1ol</option>\r\n</select>

\r\n

\r\n

\r\n

\n