select2 allowClear không được kích hoạt khi tùy chọn thiết lập động

Question

Khi tôi tạo menu thả xuống select2 được điều khiển động bằng lựa chọn trong menu thả xuống select2 khác, nút allowClear cho menu thả xuống được cập nhật sẽ bị tắt.

Nó dường như không thành vấn đề nếu tôi xây dựng Select2 trên select, tiêu diệt nó, cập nhật html, và xây dựng lại nó:

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

Hoặc nếu tôi sử dụng JSON với một đầu vào ẩn:

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

Mọi ý tưởng tại sao nút xóa biến mất?

Edit:

Xin lỗi mà tôi đã không làm rõ html của tôi. Trong mã của tôi, mọi select đều có thuộc tính data-placeholder. Đây không phải là trong fiddle tôi cung cấp, vì nó không phải là ban đầu của tôi fiddle nhưng vay mượn từ một câu hỏi SO. Tôi đã cập nhật fiddle đó với trình giữ chỗ dữ liệu và nó hoạt động: http://jsfiddle.net/eGXPe/119/.

Đây là mã cành lá cho html của tôi mà tôi đã làm trước đây không bao gồm:

<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

Như stated in the doc, allowClear cần một placeholder và placeholder cần một option giá trị tương ứng (trong đó không thể là một chuỗi rỗng, nhưng có thể là một không gian duy nhất).

allowClear

Tùy chọn này chỉ hoạt động khi giữ chỗ được xác định.

-

placeholder

Lưu ý rằng bởi vì trình duyệt giả yếu tố tùy chọn đầu tiên được chọn trong hộp chọn phi đa giá trị một yếu tố tùy chọn đầu tiên có sản phẩm nào phải cung cấp() để trình giữ chỗ hoạt động.

Vì vậy, mã của bạn nên được một cái gì đó như thế này:

$('#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: Tùy chọn allowClear nên được sử dụng kết hợp' + 'với tùy chọn placeholder.'