jQuery 动态设置选项时未启用 select2 allowClear

select2 allowClear not enabled when options set dynamically

提问by Derek Henderson

When I create select2 dropdowns that are dynamically driven by the selection in another select2 dropdown, the allowClearbutton for the updated dropdown becomes disabled.

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

It doesn't seem to matter if I build select2 on a select, destroy it, update the html, and rebuild it:

如果我在 a 上构建 select2 select，销毁它，更新 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);

Or if I use JSON with a hidden input:

或者，如果我使用带有隐藏输入的 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');
});

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

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

Any ideas why the clear button disappears?

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

Edit:

编辑：

Apologies that I did not clarify my html. In my code, every selecthas a data-placeholderattribute. This is not in the fiddle I provided, as it was not originally my fiddle but borrowed from another SO question. I have now updated that fiddle with data-placeholder and it works: http://jsfiddle.net/eGXPe/119/.

抱歉我没有澄清我的 html。在我的代码中，每个select都有一个data-placeholder属性。这不在我提供的小提琴中，因为它最初不是我的小提琴，而是从另一个 SO 问题中借来的。我现在已经用数据占位符更新了那个小提琴，它可以工作：http: //jsfiddle.net/eGXPe/119/。

Here is the twig code for my html which I did not previously include:

这是我以前没有包含的 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>

回答by Shikiryu

As stated in the doc, allowClearneeds a placeholderand placeholderneed a corresponding optionvalue (which cannot be an empty string, but can be a single space).

如文档中所述，allowClear需要 aplaceholder并且placeholder需要一个相应的option值（不能是空字符串，但可以是单个空格）。

allowClear

This option only works when the placeholder is specified.

允许清除

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

--

——

placeholder

Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided () for the placeholder to work.

占位符

请注意，由于浏览器假定在非多值选择框中选择了第一个选项元素，因此必须提供空的第一个选项元素 () 才能使占位符起作用。

So your code should be something like this :

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

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

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

回答by Lundrim Rexhepi

'Select2: The allowClearoption should be used in combination ' + 'with the placeholderoption.'

'Select2：该allowClear选项应与'+'与该placeholder选项结合使用。'

回答by mnk

'pluginOptions' => [ 'allowClear' => true, ],

'pluginOptions' => [ 'allowClear' => true, ],