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

Posted 2023-05-07

【中文标题】如何将 Select2 中某些单词的字体更改为粗体

【英文标题】：How to change font to bold for some words in Select2

【发布时间】：2016-05-18 16:20:55

【问题描述】：

我正在使用 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>

有可能吗？我怎样才能做到这一点？

【问题讨论】：

试试：$('.select2-results__option').css('font-weight', 'bold');

@Hackerman ：这不会使整个选项文本变为粗体，而不仅仅是 AK 和 HI 代码吗？

@Hackerman 这对我不起作用。谢谢！

@Alex 如果你可以为我提供一个 jsfiddle，那么我可以立即使用该功能...

【参考方案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/

【讨论】：

非常感谢！像魅力一样工作。