jQuery 多个 Select 完成选择时的事件

Question

我有一个 <select> 输入字段启用了 multiple 标志，因此用户可以一次 select 多个选项。

当我添加 change() 事件时，只要用户 select 有新选项，它就会运行s。当用户完成select他们的选择时，有没有办法让函数运行？

这是我目前拥有的：

$("#myselect").change(function(){
    console.log($(this).val());
});

目前运行秒每次都会 select 编辑一个新选项。一旦 select 列表关闭，我想得到它运行。

编辑：我的 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>

我想要做的是拥有它，所以如果 'All' 被 select 编辑，并且选择了另一个选项，它将取消 select 'All'。当使用 MaterializeCSS 框架时，当我运行 $("#myselect").formSelect(); 时，它会使 select 下拉菜单散焦，所以我试图在用户完成 select 时只使用它运行一次]他们的选择。

Answer 1

您如何确定用户何时完成选择？除了change()，您还可以尝试其他活动。

例如focusout()或keyup()

参见：https://api.jquery.com/focusout/

Answer 2

Is there a way to have a function run when the user is done selecting their options?

您可以使用 dropdownOptions 选项：

$('#myselect').formSelect({
    dropdownOptions: {
        onCloseEnd: function(e) {
            console.log(e.value);
        }
    }
});

if 'All' is selected, and another option is picked, it will deselect 'All'.

为了实现您的更改事件可以是：

$("#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>

Answer 3

如果其他解决方案不起作用，请尝试 blur，它对我有用。

$("#myselect").on('blur', function(e){
    // your code
});

jQuery 多个 Select 完成选择时的事件

jQuery Multiple Select Event when done selecting

jquery

onchange

materialize

drop-down-menu