如何在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在创建select2时修改选项文本：

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/