我有一個選擇輸入字段,我使用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 –