将图标添加到 select2 中的选项答案

【问题标题】：Add icons to options in select2将图标添加到 select2 中的选项
【发布时间】：2013-06-11 15:58:55
【问题描述】：

我试图将图标放在类似于 GitHub 中的标志示例的选项旁边：http://ivaynberg.github.io/select2/#templating，但需要图标基于它们所在的 optgroup。我最终得到相同的图标选择，而不仅仅是在他们的 optgroup 中。

$(function() {
  function format(ade) {
    if (!ade.id)
      return ade.text; // optgroup
    return "<i class='icon-info'></i>" + ade.text;
  }
  function format(bob) {
    if (!bob.id)
      return bob.text; // optgroup
    return "<i class='icon-user'></i>" + bob.text;
  }
  function format(jive) {
    if (!jive.id)
      return jive.text; // optgroup
    return "<i class='icon-exchange'></i>" + jive.text;
  }
  $("#source").select2({
    placeholder: "Get Started...",
    allowClear: true,
    minimumInputLength: 2,
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) {
      return m;
    }
  });
});

HTML

<select id="source" class="search-box">
  <option></option>
  <optgroup label="Book of Business">
    <option value="bob">Jasper Beardly</option>
    <option value="bob">John Frink</option>
    <option value="bob">Elizabeth Hoover</option>
    <option value="bob">Edna Krabappel</option>
    <option value="bob">Otto Mann</option>
  </optgroup>
  <optgroup label="Dashboard Content" id="ade">
    <option value="ade">Additional time for Oklahoma customers to make payments</option>
    <option value="ade">Who to call when you have California policy questions</option>
    <option value="ade">Product Resource Center</option>
    <option value="ade">Quote Tracker</option>
  </optgroup>
  <optgroup label="Community Discussions" id="jive">
    <option value="jive">email account on Android phone</option>
    <option value="jive">Problems with changing</option>
    <option value="jive">Transfer discount for current client moving states </option>
    <option value="jive">Quoting auto on existing client.</option>
    <option value="jive">Where can I find sample ads/flyers/brochures for advertisement?</option>
  </optgroup>
</select>

【问题讨论】：

标签： jquery search jquery-plugins jquery-select2

【解决方案1】：

老实说，这有点乱。

您有三个名称相同但参数名称不同的函数。那是行不通的。删除你的三个格式函数并用这个替换它们：

function format(o) {
    if (!o.id)
      return o.text; // optgroup
    else if (o.id == 'bob')
        return "<i class='icon-user'></i>" + o.text;
    else if (o.id == 'ade')
        return "<i class='icon-info'></i>" + o.text;
    else
        return "<i class='icon-exchange'></i>" + o.text;
  }

更好的是，让你的类名与你的 id 名匹配。所以

<option value="user">Jasper Beardly</option>

等等

那么格式化函数就变成了：

 function format(o) {
        if (!o.id)
          return o.text; // optgroup
        else
            return "<i class='icon-" + o.id + "'></i>" + o.text;
      }

【讨论】：