在select2中为选项添加图标

Question

我尝试将图标放在选项旁边，类似于GitHub中的flags示例：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>  

- beyst

Answer 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;
      }

- Bumptious Q Bangwhistle