Select2 allowClear nicht arbeiten mit dynamischen dropdown-Liste
Ich habe versucht, eine Menge von Möglichkeiten, um dieses problem zu beheben.
In einem dynamischen Liste per ajax geladen, ich kann nicht allowClear Arbeit.
Hier ist mein 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 sind bereits Hinzugefügt, der select2 javascript und css suchen, schauen Sie bitte dort
Du musst angemeldet sein, um einen Kommentar abzugeben.
Behoben werden, durch hinzufügen einer
"<option></option>"
auf den zweiten dropdown-jedes mal, wenn ich ändern Sie den Wert der ersten dropdown-Liste. Siehe Erfolg-handler unter:options.push("<option></option>");
vor der$.each
Schleife fügt die leere<option>
Beispiel von einer meiner eigenen, wie Sie sehen können, ich benutze nicht die "option" - tags innerhalb von meiner Schleife.