Select2 - How to insert a bolded headline?

问题

I've looked in all the select2's documentation and could not find how can I insert those bold headlines:

Can someone provide a complete code example (CSS needed ?) of how to achieve this?

回答1:

The example takes one drop down and runs select2 on each, if you are trying to get the example page working

HTML should look exactly like this

 <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 from the example looks like this, notice the function takes the source and puts data using the populate class in the each function

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

回答2:

You can achieve this by using the optgroup tag.

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

You'll need to make sure that you include the Select2 CSS file. If you do not see the correct font, try setting the body to Arial.

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

回答3:

Are you properly linking the css file select2.css (Get it here: https://github.com/ivaynberg/select2/blob/master/select2.css)

There is a class defined in it for that purpose:

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

Make sure you are properly linking and it is not being overridden.

来源：https://stackoverflow.com/questions/26192319/select2-how-to-insert-a-bolded-headline

标签

jquery

html5

jquery-select2