Jquery 动态设置选项时，选择2 allowClear未启用

当我创建由另一个select2下拉列表中的选择动态驱动的select2下拉列表时，更新下拉列表的

allowClear

按钮将被禁用

如果我在

select

上构建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'},{id:1,text:'10'}]
    ];

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

你知道为什么“清除”按钮消失了吗

编辑：

抱歉，我没有澄清我的html。在我的代码中，每个

选择

都有一个

数据占位符

属性。这不是我提供的小提琴，因为它最初不是我的小提琴，而是借用了另一个SO问题。我现在已经更新了那个摆弄数据占位符的工具，它可以工作了：

以下是我以前没有包含的html的细枝代码：

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

编辑面板ID？
专家组：
{related.panel_id%}中的面板的%
{{panel.name}
{%endfor%}


编辑ISP ID？
ISP：
{related.isp_id%}
{{isp.name}
{%endfor%}


编辑包ID？
包裹：
首先选择ISP&hellip；

As，

allowClear

需要一个

占位符

，

占位符

需要一个相应的

选项

值（不能是空字符串，但可以是单个空格）

allowClear

此选项仅在指定占位符时有效

--

占位符

请注意，因为浏览器假定第一个选项元素处于选中状态 在非多值选择框中，第一个选项元素必须为空 为占位符工作提供了（）

所以你的代码应该是这样的：

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

---

'Select2:allowClear选项应组合使用'+

---

“使用

占位符
选项。”
'pluginOptions'=>['allowClear'=>true，]，
似乎在HTML中找不到“allowClear”？@Baszz，它在
启用选择2
方法中。@CBroe，不需要snide。我没有提供HTML，但我的每个下拉列表都有
数据占位符=“占位符文本”
。你的小提琴中没有占位符。@CBroe，我知道这一点。我没有创建那个小提琴，在添加
allowClear
选项时忽略了添加占位符。我现在正在修理。但是，我可以向您保证，我的html有
数据占位符
，但是
allowClear
不起作用。我将很快发布html。问题不是占位符，我通过
数据占位符
属性在html中使用了占位符，而是空的
。我有一个文本选项，没有值，但这还不够好。谢谢你的回答。老兄，那个占位符给了我更多的机会。这是一个不合逻辑的解决方案……另一个需要记住的重要问题是占位符不能被空字符串替换（如这里所述）。如果不需要占位符，但allowClear选项是，则可以将占位符设置为空白字符串（例如单个空格）。