如何在Select2中將字體更改爲粗體字

Question

我正在使用select2 4.0.1，並且需要更改某些單詞的字體。更具體地講，我需要表現出大膽的/不同的字體代碼AK和HI，是這樣的：

<select id="select2" style="width:300px"> 
    <optgroup label="Alaskan/Hawaiian Time Zone"> 
     <option value="AK"><strong>AK</strong> Alaska</option> 
     <option value="HI"><strong>HI</strong> Hawaii</option> 
    </optgroup> 

這可能嗎？我怎麼能做到這一點？

Answer 1

你可以用這種方法來完成它。使用templateResult修改選項文本選擇2時生成：

HTML：

<select id="select2" style="width:300px"> 
    <optgroup label="Alaskan/Hawaiian Time Zone"> 
    <option value="AK">Alaska</option> 
    <option value="HI">Hawaii</option> 
    </optgroup> 
</select> 

JS：

$('#select2').select2({ 
    templateResult: formatOutput 
}); 

function formatOutput (optionElement) { 
    if (!optionElement.id) { return optionElement.text; } 
    var $state = $('<span><strong>' + optionElement.element.value + '</strong> ' + optionElement.text + '</span>'); 
    return $state; 
}; 

工作小提琴：https://jsfiddle.net/18dzrhgx/1/