select2의 옵션에 아이콘 추가

Question

GitHub : http://ivaynberg.github.io/select2/#templating의 플래그 예제와 비슷한 옵션 옆에 아이콘을 넣으려고하지만 아이콘은 해당 그룹의 optgroup을 기반으로해야합니다. optgroup에있는 대신 모든 선택 항목에 동일한 아이콘이 표시됩니다.

JS

$(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> 

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