我有一个<select>
输入字段,其中启用了multiple
标志,因此用户可以一次选择多个选项。
当我添加change()
事件时,只要用户选择一个新选项,该事件就会运行。用户选择完选项后,是否可以运行功能?
这是我目前拥有的:
$("#myselect").change(function(){
console.log($(this).val());
});
当前,此操作每 次运行。选择列表关闭后,我希望它运行。
编辑:我的HTML是MaterializeCSS的基本代码
<div class="input-field col s12">
<select name="myselect" multiple>
<option value="All" selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
我想做的是拥有它,因此,如果选择“全部”,并且选择了另一个选项,它将取消选择“全部”。使用MaterializeCSS框架时,当我运行$("#myselect").formSelect();
时,它会使选择下拉列表失去焦点,因此我试图在用户选择完选项后仅使其运行一次。
答案 0 :(得分:1)
当用户选择完选项后,是否可以运行功能?
您可以使用dropdownOptions选项:
$('#myselect').formSelect({
dropdownOptions: {
onCloseEnd: function(e) {
console.log(e.value);
}
}
});
如果选择了“全部”,并且选择了另一个选项,它将取消选择“全部”。
为了实现您的 change 事件可以是:
$("#myselect").on('change', function(e){
var selectedItems = $(this).val() || [];
// if All and another option(s) are selected....
if (selectedItems.length > 1 && selectedItems.indexOf('All') >= 0) {
// deselect All....
$(this).siblings('ul.select-dropdown')
.find('li.selected:contains(All)').trigger('click');
}
});
$('#myselect').formSelect({
dropdownOptions: {
onCloseEnd: function(e) {
console.log(e.value);
}
}
});
$("#myselect").on('change', function(e){
var selectedItems = $(this).val() || [];
if (selectedItems.length > 1 && selectedItems.indexOf('All') >= 0) {
$(this).siblings('ul.select-dropdown').find('li.selected:contains(All)').trigger('click');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<div class="row">
<form class="col s12">
<div class="row">
<div class="col s12">
<br>
<p>Demo.......</p>
</div>
<div class="input-field col s12 m6">
<select id="myselect" name="myselect" multiple>
<option value="All" selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
</div>
</form>
</div>
答案 1 :(得分:0)