jquery – 当动态选项设置时,select2 allowClear未启用

当我创建由另一个SELEct2下拉菜单中的选择动态驱动的SELEct2下拉列表时，更新的下拉列表的allowClear按钮将被禁用。

如果我在选择中构建SELEct2，销毁它，更新html并重建它似乎并不重要：

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

或者如果我使用带有隐藏输入的JSON：

$(function() {
    var data = [
        [{id:0,text:'black'},{id:1,text:'blue'}],[{id:0,text:'9'},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/

任何想法为什么清除按钮消失？

编辑：

道歉，我没有澄清我的html。在我的代码中，每个选择都有一个数据占位符属性。这不是我提供的小提琴，因为它不是我的小提琴，而是从另一个SO问题借来的。我现在已经更新了数据占位符，它的作品：http://jsfiddle.net/eGXPe/119/。

这是我以前没有包含的html的twig代码：

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

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