Select2 - How do I insert a highlighted bold title?
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>
source to share
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
.
source to share
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.
source to share