Select2 allowClear not working with dynamic dropdown list

html, javascript, jquery, jquery-select2

Solution

Fixed by adding an `"<option></option>"` to second dropdown each time I change the value of first dropdown. See success handler below:

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

Problem

I have tried a lot of ways to fix this problem. At a dynamic list loaded via ajax, I can't make allowClear work. Here is my 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 }); }); } }); }); }); ``` in jsfiddle are already added the select2 javascript and css, please have a look there

Original source