如何将 Select2 中的某些单词的字体更改为粗体

Question

我正在使用select2 4.0.1，我需要更改一些字的字体。更具体地说，我需要在 bolder/different 字体中显示代码 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/

如何将 Select2 中的某些单词的字体更改为粗体

How to change font to bold for some words in Select2

jquery

css

html

jquery-select2