別のselect2ドロップダウンの選択によって動的に駆動されるselect2ドロップダウンを作成すると、更新されたドロップダウンのallowClear
ボタンが無効になります。
select
で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'},{id:1,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を明確にしなかったことをおologiesびします。私のコードでは、すべてのselect
にはdata-placeholder
属性。これはもともと私のフィドルではなく、別のSOの質問から借りたものです。現在、そのフィドルをdata-placeholderで更新しており、機能します。 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>
ドキュメントに記載 のように、allowClear
にはplaceholder
が必要で、placeholder
には対応するoption
値が必要です(空にはできません)文字列ですが、単一のスペースを使用できます)。
allowClear
このオプションは、プレースホルダーが指定されている場合にのみ機能します。
-
プレースホルダー
ブラウザーは、複数値以外の選択ボックスで最初のオプション要素が選択されていると想定しているため、プレースホルダーが機能するには空の最初のオプション要素を提供する必要があることに注意してください。
したがって、コードは次のようになります。
$('#attribute').select2({
allowClear: true,
placeholder: "Select an attribute"
}).on('change', function() {
$('#value')
.removeClass('select2-offscreen')
.select2({
data:data[$(this).val()],
allowClear: true,
placeholder: "Select a value"
});
}).trigger('change');
'Select2:allowClear
オプションは、' + 'placeholder
オプションと組み合わせて使用する必要があります。