选择2 allowClear不使用动态下拉列表
Select2 allowClear not working with dynamic dropdown list
我已经尝试了很多方法来解决这个问题。
在通过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,请看一下
每次更改第一个下拉列表的值时,都会在第二个下拉列表中添加一个"<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
});
});
}
});
});
我自己的一个例子,正如你所看到的,我在循环中没有使用"option"标记。
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
};
}
}
});
相关文章:
- HtmlService表单-动态下拉列表
- 动态下拉列表选项在添加多列后未填充
- 使用 JavaScript 创建动态下拉列表
- 使用javascript中的append创建动态下拉列表
- 选择2 allowClear不使用动态下拉列表
- 创建一个基于mysqli的动态下拉列表
- javascript动态下拉列表-两种形式相互依赖
- 如何使用react bootstrap创建动态下拉列表
- 如何将 ID 分配给动态下拉列表选择
- 使用 dojo 将鼠标悬停在动态下拉列表选择上时添加工具提示
- jQuery 和 C# 动态下拉列表
- 如何使我的动态下拉列表也依赖于父下拉列表
- Wordpress中的国家/州动态下拉列表
- on使用 PHP 更改动态下拉列表值
- Perl 中的动态下拉列表
- 动态下拉列表值 JavaScript
- 动态下拉列表 - PHP 和 Javascript
- Grails 动态下拉列表为 edit.gsp 添加所选值
- 填充 3 个动态下拉列表
- 如何在javascript中添加动态下拉列表