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

你可以这样做。在创建select2时使用templateResult修改选项文本：

<强> 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/

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

1 个答案: