Select2 allowClear 不适用于动态下拉列表答案

【问题标题】：Select2 allowClear not working with dynamic dropdown listSelect2 allowClear 不适用于动态下拉列表
【发布时间】：2013-12-06 21:07:54
【问题描述】：

我已经尝试了很多方法来解决这个问题。

在通过 ajax 加载的动态列表中，我无法让 allowClear 工作。

这是我的jsFiddle

HTML：

<select id="first" class="init-select2" data-placeholder="First dropdown" data-allowclear="true">
    <option></option>
    <option>First option</option>
    <option>Second option</option>
</select>
<select id="second" class="init-select2" data-placeholder="Second Dropdown" data-allowclear="true" disabled="disabled">
    <option></option>
</select>

Javascript：

$(function() {
    $('.init-select2').removeClass('init-select2').each(function(){
            if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "true"){
                $(this).select2({
                    allowClear: true
                });
            } else if ($(this).attr("data-allowclear") && $(this).attr("data-allowclear") == "false") {
                $(this).select2({
                    allowClear: false
                });
            }
        });

    $('#first').change(function () {
        var options = [];
        $.ajax({
            type: "POST",
            url: "/echo/json/",
            data: {"json":JSON.stringify({"one":"first","two":"second","three":"third"})},
            cache: false,

            success: function(data) {
                $.each(data, function (index, value) {
                    options.push("<option>" + value + "</option>");
                    $("#second").find('option').remove().end().append(options).attr("disabled", false).select2({ allowClear: true });
                });
            }
        }); 
    });
});

在jsfiddle中已经添加了select2 javascript和css，请看那里

【问题讨论】：

标签： javascript jquery html jquery-select2

【解决方案1】：

每次更改第一个下拉列表的值时，通过将"<option></option>" 添加到第二个下拉列表来修复。请参阅下面的成功处理程序：

$('#first').change(function () {
    var options = [];
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: {
            "json": JSON.stringify({
                "one": "first",
                "two": "second",
                "three": "third"
            })
        },
        cache: false,

        success: function (data) {
            options.push("<option></option>");
            $.each(data, function (index, value) { 
                options.push("<option>" + value + "</option>");
                $("#second").find('option').remove().end().append(options).attr("disabled", false).select2({
                    allowClear: true
                });
            });
        }
    });
});

【讨论】：

哪一行包含这个“修复”？
options.push("<option></option>"); 在$.each 循环之前添加空白<option>

【解决方案2】：

我自己的一个例子，你可以看到我没有在我的循环中使用“选项”标签。

            function companyURL() {
                if ($.isNumeric($('#supplier_select').val())) {
                    return company_url + '/' + $('#supplier_select').val() + '/';
                } else {
                    return company_url;
                }
            }

            var results = [];

            $('.company_select').select2({
                ajax: {
                    url: function () {
                        return companyURL();
                    },
                    dataType: 'json',
                    quietMillis: 100,
                    data: function (term) {
                        return {
                            term: term
                        };
                    },
                    results: function (data) {
                        results = [];
                        results.push({
                            id: '',
                            text: 'Select a company'
                        });
                        $.each(data, function (index, item) {
                            results.push({
                                id: item.company_id,
                                text: item.company_name
                            });
                        });
                        return {
                            results: results
                        };
                    }
                }
            });

【讨论】：