Question

我查看了所有select2的文档，但无法找到如何插入这些大胆的标题：

enter image description here

有人可以提供完整的代码示例（需要CSS吗？）如何实现这一目标？

Answer 1

如果您尝试让示例页面正常工作，该示例需要一个下拉列表并在每个下拉列表上运行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如下所示，注意函数接受源并使用每个函数中的populate类放置数据

<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>

Answer 2

您可以使用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/

Answer 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;
}

确保您正确链接且未被覆盖。

Select2 - 如何插入粗体标题？

3 个答案: