select2 allowClear nicht aktiviert, wenn Optionen dynamisch festgelegt werden

Question

Wenn ich Select2-Dropdowns erstellen, die dynamisch von der Auswahl in einem anderen Dropdown-Menü select2 gesteuert werden, wird die Schaltfläche allowClear für das aktualisierte Dropdown deaktiviert.

Es scheint nicht egal, ob ich select2 auf einem select bauen, zerstören, die HTML aktualisieren und es wieder aufzubauen:

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

Oder wenn ich JSON mit einem versteckten Eingang:

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

Irgendwelche Ideen, warum die Löschtaste verschwindet?

Edit:

Entschuldigt, dass ich nicht meinen html klären. In meinem Code hat jeder select ein data-placeholder Attribut. Dies ist nicht in der Geige, die ich zur Verfügung gestellt habe, da es ursprünglich nicht meine Geige war, sondern von einer anderen SO-Frage entlehnt wurde. Ich habe jetzt diese Geige mit Daten-Platzhalter aktualisiert und es funktioniert: http://jsfiddle.net/eGXPe/119/.

Hier ist der Zweig-Code für meine html, die ich zuvor nicht enthalten:

<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

Als stated in the doc, allowClear braucht ein placeholder und placeholder einen entsprechenden option Wert benötigen (die keine leere Zeichenfolge sein kann, kann aber sei ein einzelnes Leerzeichen).

allowClear

Diese Option funktioniert nur, wenn der Platzhalter angegeben ist.

-

Platzhalter

Beachten Sie, dass, da Browser die erste Option Element übernehmen ausgewählt ist in Nicht-Mehrwert-Auswahlboxen eine leere erste Option Element sein muss vorgesehen() damit der Platzhalter funktioniert.

So sollten Sie Ihren Code so etwas wie dieses:

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

'Select2: Die allowClear Option sollte in Kombination verwendet werden' + 'mit der placeholder Option.'