Select2 - How do I insert a highlighted bold title?
I went through all the select2 documentation and couldn't find how I can insert these bold headers:
Can anyone provide a complete code example (CSS required?) On how to do this?
The example takes one dropdown menu and runs select2 on each one if you are trying to get the example page to work
HTML should look exactly the same
<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: note that the function takes the source code and puts data using the populate class in 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>
You can achieve this using a tag 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>
You need to make sure you include the Select2 CSS file. If you don't see the correct font, try setting the body to Arial
.
http://jsfiddle.net/munr/gept53a2/
You are linking the select2.css css file correctly (Get it here: https://github.com/ivaynberg/select2/blob/master/select2.css )
For this, there is a class defined in it:
.select2-results li.select2-result-with-children > .select2-result-label {
font-weight: bold;
}
Make sure you bind correctly and not overridden.