我有一个选择输入字段,我使用Select2 jQuery插件进行了增强。我传递了minimumInputLength属性,让用户在填充匹配项之前输入几个字母。但是,如果需要,我不确定用户如何清除选择。当Select2使用minimumInputLength时清除选择
我试着通过allowClear属性,虽然它确实显示'X',但按钮不起作用,选择依然存在。
编辑:
jsfiddle link: https://jsfiddle.net/8f1u48et/
我有一个选择输入字段,我使用Select2 jQuery插件进行了增强。我传递了minimumInputLength属性,让用户在填充匹配项之前输入几个字母。但是,如果需要,我不确定用户如何清除选择。当Select2使用minimumInputLength时清除选择
我试着通过allowClear属性,虽然它确实显示'X',但按钮不起作用,选择依然存在。
编辑:
jsfiddle link: https://jsfiddle.net/8f1u48et/
你需要初始化你选择二jQuery插件时,定义placeholder
属性。它是插件所必需的。
更新的代码看起来像:
$('#members').select2({
minimumInputLength: 3,
allowClear: true,
placeholder: ''
});
您可以在this JSFiddle检查工作的例子。当你有选择的东西,点击清除按钮将删除当前的选择。
关于该placeholder
是需要用这个插件,有a section of the documentation致力于这个问题,但目前,它尚未回答的事实...
如果您需要在正在发生的事情更多的控制在组件的生命周期中,Select2将触发的事件列表可在the documentation中找到。
例如,一个监听器附加到选择删除之前(当您单击清除按钮等),其触发unselecting
事件,您将使用:
$('#members').on('select2:unselecting', function (evt) {
// Do something...
});
还有一个恼人在清除和删除选择时,Select2将错误地切换下拉菜单。
该问题记录在their Github上,但尚未关闭并修复。许多变通方法,在这个线程都可以像取消一个select2:unselect
事件之后立即发生select2:opening/closing
事件:
var $element = $('#members');
$element.on('select2:unselect', function() {
function cancelAndRemove(event) {
event.preventDefault()
removeEvents()
}
function removeEvents() {
$element.off('select2:opening', cancelAndRemove)
$element.off('select2:closing', cancelAndRemove)
}
$element.on('select2:opening', cancelAndRemove)
$element.on('select2:closing', cancelAndRemove)
setTimeout(removeEvents, 0)
});
你可以使用select2:unselecting事件,以便当用户单击X选择被删除的价值和选择2面板没有更多的打开:
$(function() {
$('#members').select2({
placeholder: "Select a member",
minimumInputLength: 3,
allowClear: true
});
// when you click on the X....
$('#members').on('select2:unselecting', function(e) {
// prevent the default action
e.preventDefault();
// deselect....
$('#members').val('');
// inform select2 of deselecting....
$('#members').trigger('change.select2');
})
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="members" style="width: 100%;">
<option value=""> </option>
<option value="300001">Daniel Akaka Kahikina</option>
<option value="300002">Lamar Alexander</option>
<option value="300003">Wayne Allard A.</option>
<option value="300004">George Allen Felix</option>
<option value="300005">John Smith</option>
</select>
你有一个占位符和空白''为TH你的'
您可以添加JSFiddle重现问题,看不到重现吗? – HiDeo
完成创建jsfiddle –