select2 allowClear nie jest włączony, gdy opcje są ustawiane dynamicznie

Question

Po utworzeniu list wyboru select2, które są dynamicznie sterowane przez zaznaczenie w innym rozwijanym menu select2, przycisk allowClear dla zaktualizowanego menu rozwijanego zostaje wyłączony.

To nie wydaje się ważne, czy zbudować select2 na select, zniszczyć go zaktualizować html, i odbudować go:

var enableSelect2 = function() { 
     $(this).select2({ 
      width: '200px', 
      allowClear: true, 
      minimumResultsForSearch: 7, 
      formatResult: function (result, container, query, escapeMarkup) { 
       var markup = []; 
       markMatchedSelect2Text(result.text, query.term, markup, escapeMarkup); 
       return markup.join(''); 
      } 
     }); 
    }, 
    populateDropdown = function() { 
     var filterBy = this.id, 
      t = $(this); 
     $.ajax({ 
      type: 'post', 
      url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(), 
      success: function (data) { 
       var toRebuild, 
        target; 
       if (filterBy === 'panel_id') { 
        toRebuild = $('#isp_id, #package_id'); 
        target = $('#isp_id'); 
       } else { 
        toRebuild = $('#package_id'); 
        target = $('#package_id'); 
       } 
       toRebuild.each(function() { 
        $(this).select2('destroy'); 
       }); 
       target.html(data); 
       if (filterBy === 'panel_id') { 
        $('#package_id').html($(document.createElement('option')).attr('value', 0).text('Select ISP first\u2026')); 
       } 
       toRebuild.each(enableSelect2); 
      } 
     }); 
    }; 

$('body').on('change', '#searchForm #isp_id, #searchForm #panel_id', populateDropdown); 

Albo jeśli mogę użyć JSON z ukrytym wejściem:

$(function() { 
    var data = [ 
     [{id:0,text:'black'},{id:1,text:'blue'}], 
     [{id:0,text:'9'},{id:1,text:'10'}] 
    ]; 

    $('#attribute').select2({allowClear: true}).on('change', function() { 
     $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true}); 
    }).trigger('change'); 
}); 

http://jsfiddle.net/eGXPe/116/

Jakieś pomysły dlaczego jasny przycisk znika?

Edit:

Przepraszam, że nie wyjaśnić moje html. W moim kodzie każdy atrybut select ma atrybut data-placeholder. Nie jest to w skrzypcach, które dostarczyłem, ponieważ nie było to pierwotnie moje skrzypce, ale zapożyczone z innego pytania SO. Zaktualizowałem teraz skrzypce z elementem zastępczym danych i działa: http://jsfiddle.net/eGXPe/119/.

Oto kod gałązka dla mojego html które poprzednio nie obejmują:

<li> 
    <label for="edit[panel_id]" class="hidden">Edit Panel ID?</label> 
    <input type="checkbox" id="edit[panel_id]" name="edit[panel_id]" /> 
    <label for="panel_id">Panel:</label> 
    <select id="panel_id" name="panel_id" data-placeholder="Select a panel"> 
     <option></option> 
     {% for panel in related.panel_id %} 
      <option value="{{ panel.value }}">{{ panel.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[isp_id]" class="hidden">Edit ISP ID?</label> 
    <input type="checkbox" id="edit[isp_id]" name="edit[isp_id]" /> 
    <label for="isp_id">ISP:</label> 
    <select id="isp_id" name="isp_id" data-placeholder="Select an ISP"> 
     <option></option> 
     {% for isp in related.isp_id %} 
      <option value="{{ isp.value }}">{{ isp.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[package_id]" class="hidden">Edit Package ID?</label> 
    <input type="checkbox" id="edit[package_id]" name="edit[package_id]" /> 
    <label for="package_id">Package:</label> 
    <select id="package_id" name="package_id" data-placeholder="Select a package"> 
     <option></option> 
     <option value="0">Select ISP first&hellip;</option> 
    </select> 
</li> 

Answer 1

Jak stated in the doc, allowClear potrzebuje placeholder i placeholder potrzebują odpowiedniej wartości option (która nie może być pusty ciąg znaków, ale może być pojedynczym miejscem).

allowClear

Opcja ta działa tylko wtedy, gdy jest określony zastępczy.

-

zastępczy

Zauważ, że ponieważ przeglądarki zakładają pierwszy element jest zaznaczona opcja w niewyspecjalizowanych wielu wartości wybranych pól pusty pierwszy element opcja musi być warunkiem() aby symbol zastępczy działał.

więc kod powinien być mniej więcej tak:

$('#attribute').select2({ 
    allowClear: true, 
    placeholder: "Select an attribute" 
}).on('change', function() { 
    $('#value') 
     .removeClass('select2-offscreen') 
     .select2({ 
      data:data[$(this).val()], 
      allowClear: true, 
      placeholder: "Select a value" 
     }); 
}).trigger('change'); 

http://jsfiddle.net/eGXPe/118/

Answer 2

'Wybór2: Opcja allowClear powinien być stosowany w połączeniu' + 'z opcją placeholder.