Select2 allowClear不适用于动态下拉列表 [英] Select2 allowClear not working with dynamic dropdown list
问题描述
我尝试了很多方法来解决这个问题。
在通过ajax加载的动态列表中，我无法让allowClear工作。
这是我的< a href =http://jsfiddle.net/smotru/WT6xW/30/ =nofollow> jsFiddle
HTML：
< select id =firstclass =init-select2data-placeholder =First dropdowndata-allowclear =true >
< option>< / option>
< option>第一个选项< / option>
< option>第二个选项< / option>
< / select>
< option>< / option>
< / select>
Javascript：
< （$（$（$））$（$）$（$）$（$） .attr（data-allowclear）&& $（this）.attr（data-allowclear）==true）{
$（this）.select2（{
allowClear ：true
}）;
} else if（$（this）.attr（data-allowclear）&& $（this）.attr（data-allowclear）== ）{
$（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，
成功：函数（数据）{
$ .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，请看看那里
通过将< option>< / option>添加到第二个每次更改第一个下拉列表的值时都会显示下拉列表。
$ b $ $ $ $ $ $' [];
$ .ajax（{
type：POST，
url：/ echo / json /，
data：{
json ：JSON.stringify（{
one：first，
two：second，
three：third
}）$ b $ （b），
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
}）;
}）;
}
}）;
}）;
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
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
});
});
}
});
});
这篇关于Select2 allowClear不适用于动态下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
