Select2 - 如何插入粗体标题？答案

【问题标题】：Select2 - How to insert a bolded headline?Select2 - 如何插入粗体标题？
【发布时间】：2014-10-04 11:22:32
【问题描述】：

我查看了所有 select2 的文档，但找不到如何插入这些粗体标题：

有人可以提供一个完整的代码示例（需要 CSS 吗？）来说明如何实现这一点？

【问题讨论】：

您为此使用 optgroups。
我尝试过使用 optgroups 但我无法获得相同的效果。

【解决方案1】：

您可以通过使用optgroup 标签来实现这一点。

<select style="width:300px">
  <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
  </optgroup>
  <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
    <option value="WA">Washington</option>
  </optgroup>
</select>

您需要确保包含 Select2 CSS 文件。如果您没有看到正确的字体，请尝试将正文设置为 Arial。

http://jsfiddle.net/munr/gept53a2/

【讨论】：

【解决方案2】：

如果您试图让示例页面正常工作，该示例需要一个下拉菜单并在每个下拉菜单上运行 select2

HTML 应该是这样的

 <select style="width:300px" id="source">
               <optgroup label="Alaskan/Hawaiian Time Zone">
                   <option value="AK">Alaska</option>
                   <option value="HI">Hawaii</option>
               </optgroup>
               <optgroup label="Pacific Time Zone">
                   <option value="CA">California</option>
                   <option value="NV">Nevada</option>
                   <option value="OR">Oregon</option>
                   <option value="WA">Washington</option>
               </optgroup>
</select>

       <p>
           <select id="e1" class="populate" style="width:300px"></select>
       </p>

示例中的 js 看起来像这样，注意该函数获取源并使用每个函数中的填充类放置数据

<script id="script_e1">

$(function() {
   var opts=$("#source").html(), opts2="<option></option>"+opts;
   $("select.populate").each(function() { var e=$(this); e.html(e.hasClass("placeholder")?opts2:opts); });
   $(".examples article:odd").addClass("zebra");
});

$(document).ready(function() {
    $("#e1").select2();
});
</script>

【讨论】：

【解决方案3】：

您是否正确链接了 css 文件 select2.css（在此处获取：https://github.com/ivaynberg/select2/blob/master/select2.css）

为此目的定义了一个类：

.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: bold;
}

确保您正确链接并且没有被覆盖。

【讨论】：

它已正确链接，但 html 应该是什么样子？你能举个例子吗？
上述问题示例中显示的 html 是完美的，请检查您的浏览器控制台并使用检查元素检查 css 是否被正确应用或覆盖。
但是html不包含label标签