完成选择时的jQuery多选事件

Posted 2023-02-22

【中文标题】完成选择时的jQuery多选事件

【英文标题】：jQuery Multiple Select Event when done selecting

【发布时间】：2019-01-31 08:33:24

【问题描述】：

我有一个<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(); 时，它会使选择下拉菜单失焦，因此我试图仅在用户完成选择选项时让它运行一次。

【参考方案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>

【讨论】：

这只能工作一次。如果用户选择了不同的选项，然后想再次单击全部，它将不起作用

@Bijan 确实。如果选择了所有选项，您要求取消选择所有选项。请澄清它应该如何工作。谢谢

我做到了，所以如果选择了全部，它将执行$(this).siblings('ul.select-dropdown').find('li.selected:not(:contains(All))').trigger('click'); 取消选择所有内容

@Bijan 我明白了。谢谢

【参考方案2】：

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

如focusout()或keyup()

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

【讨论】：

我假设他们在下拉菜单关闭时完成了选择。 focusout 永远不会在选择下拉菜单上触发。

【参考方案3】：

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

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