jquery - 如何将 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;
};

工作 fiddle :https://jsfiddle.net/18dzrhgx/1/