当我创建由另一个select2下拉菜单中的选择动态驱动的select2下拉列表时，更新的下拉列表的allowClear按钮将被禁用。
如果我在选择中构建select2，销毁它，更新html并重建它似乎并不重要：
var enableSelect2 = function () {
$(this).select2({
width: '200px',allowClear: true,minimumResultsForSearch: 7,formatResult: function (result,container,query,escapeMarkup) {
var markup = [];
markMatchedSelect2Text(result.text,query.term,markup,escapeMarkup);
return markup.join('');
}
});
},populateDropdown = function () {
var filterBy = this.id,t = $(this);
$.ajax({
type: 'post',url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(),success: function (data) {
var toRebuild,target;
if (filterBy === 'panel_id') {
toRebuild = $('#isp_id,#package_id');
target = $('#isp_id');
} else {
toRebuild = $('#package_id');
target = $('#package_id');
}
toRebuild.each(function () {
$(this).select2('destroy');
});
target.html(data);
if (filterBy === 'panel_id') {
$('#package_id').html($(document.createElement('option')).attr('value',0).text('Select ISP first\u2026'));
}
toRebuild.each(enableSelect2);
}
});
};
$('body').on('change','#searchForm #isp_id,#searchForm #panel_id',populateDropdown);
或者如果我使用带有隐藏输入的JSON：
$(function() {
var data = [
[{id:0,text:'black'},{id:1,text:'blue'}],[{id:0,text:'9'},text:'10'}]
];
$('#attribute').select2({allowClear: true}).on('change',function() {
$('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true});
}).trigger('change');
});
http://jsfiddle.net/eGXPe/116/
任何想法为什么清除按钮消失？
编辑：
道歉，我没有澄清我的html。在我的代码中，每个选择都有一个数据占位符属性。这不是我提供的小提琴，因为它不是我的小提琴，而是从另一个SO问题借来的。我现在已经更新了数据占位符，它的作品：http://jsfiddle.net/eGXPe/119/。
这是我以前没有包含的html的twig代码：
<li>
<label for="edit[panel_id]" class="hidden">Edit Panel ID?</label>
<input type="checkBox" id="edit[panel_id]" name="edit[panel_id]" />
<label for="panel_id">Panel:</label>
<select id="panel_id" name="panel_id" data-placeholder="Select a panel">
<option></option>
{% for panel in related.panel_id %}
<option value="{{ panel.value }}">{{ panel.name }}</option>
{% endfor %}
</select>
</li>
<li>
<label for="edit[isp_id]" class="hidden">Edit ISP ID?</label>
<input type="checkBox" id="edit[isp_id]" name="edit[isp_id]" />
<label for="isp_id">ISP:</label>
<select id="isp_id" name="isp_id" data-placeholder="Select an ISP">
<option></option>
{% for isp in related.isp_id %}
<option value="{{ isp.value }}">{{ isp.name }}</option>
{% endfor %}
</select>
</li>
<li>
<label for="edit[package_id]" class="hidden">Edit Package ID?</label>
<input type="checkBox" id="edit[package_id]" name="edit[package_id]" />
<label for="package_id">Package:</label>
<select id="package_id" name="package_id" data-placeholder="Select a package">
<option></option>
<option value="0">Select ISP first…</option>
</select>
</li>
解决方法
作为
stated in the doc，allowClear需要一个占位符和占位符，需要一个对应的选项值(不能是一个空字符串，而是一个空格)。
allowClear
This option only works when the placeholder is specified.
–
placeholder
Note that because browsers assume the first option element is selected
in non-multi-value select Boxes an empty first option element must be
provided () for the placeholder to work.
所以你的代码应该是这样的：
$('#attribute').select2({
allowClear: true,placeholder: "Select an attribute"
}).on('change',function() {
$('#value')
.removeClass('select2-offscreen')
.select2({
data:data[$(this).val()],placeholder: "Select a value"
});
}).trigger('change');
