如何使用 jQuery 捕获多选选项列表和捆绑中的所有选定项目答案

【问题标题】：How to capture all selected items in a Multiselect option list and bundle using jQuery如何使用 jQuery 捕获多选选项列表和捆绑中的所有选定项目
【发布时间】：2017-08-24 19:09:02
【问题描述】：

我想通过 Ajax 将所有多选选项项写入服务器端数据库表。我不想调用该函数并在每个选择/取消选择操作上进行写入。我想让用户选择和取消选择所有所需的选项，然后我想进行 ajax 调用并将结果一次写入数据库。

我想在 jQuery 中处理这个问题。

我已经让 Ajax 脚本和服务器端数据库更新脚本工作了——没问题。

捕获多选项目并进行 ajax 调用的最佳方法是什么？

会是焦点离开选择框的时候吗？还是其他更好的方法？

感谢您为我指明了正确的方向。

修正#1

看起来.change() 是去这里的唯一方法......当然，除了答案中建议的添加按钮。按钮选项不是我希望使用该应用程序的方式。我似乎无法在 <select> 元素上捕获 .focus() 或 .blur() 或 .focusout()。

第 2 条修正案

试过了——不行

  $( 'select.driverItems' ).on('blur',function(){
    alert('focused out');
    console.log( $(this).val() );
  });

试过了——不行

  $( 'select#driverIDs_0' ).on('blur',function(){
    alert('focused out');
    console.log( $(this).val() );
  });

试过了——它有效！

  $( 'select.driverItems' ).change(function() {
    alert('focused out');
    console.log( $(this).val() );
  });

【问题讨论】：

标签： jquery ajax multi-select blur focusout

【解决方案1】：

从技术上讲，没有办法确定用户是否完成了多选，因为还有其他因素会导致用户退出选择过程，（填写其他字段、alt-tab、选择要阅读的消息、等）触发失去焦点事件。

您也尽可能不希望多次往返于服务器，因此最好不要在选择/取消选择时进行更新。

唯一可行的方法是添加一个触发 ajax 的按钮。

【讨论】：

谢谢@Nathan。 [第 1 部分] jQuery 中是否有我可以尝试的“.lostFocusEvent()”之类的东西？我现在正在使用.on('change',...) 实现，但我宁愿不要在每次鼠标点击时都点击服务器。但是，如果我唯一的解决方案是添加另一个按钮，我会在每次单击鼠标时点击服务器。从可用性的角度来看，我的客户会因为必须单击提交按钮而感到抓狂，因为 Web 表单已经非常复杂并且包含许多数据收集点。
[第 2 部分] 我需要实现 3 个单独的 .focusout() 实例以将多选值发送回服务器，因此我不想将它们与 3 个额外的提交按钮结合起来。谢谢。
@H.Ferrence 是的，您可以使用.on('blur', function(evt, args){...} ) api.jquery.com/blur
无论出于何种原因@Nathan，我昨天（在您建议之前）尝试过，但没有成功。我今天又试了一次，仍然——没有成功...$( 'select#myId' ).on('blur',function(){...});
您是否尝试仅在选择器中使用 id 而不是继承选择器？根据我的理解，$('select #myId') 只会在 <select> 标签内搜索您的 id 而不是 <select> 标签本身

【解决方案2】：

然后让用户选择他想要的任何东西
在 Html 中添加按钮
当按下按钮时
获取jquery中所有选中的值
进行 Ajax 调用并保存值

【讨论】：

好的，谢谢你的建议。我更喜欢按照我描述的方式进行操作，因为我并排有 3 个不同的选择选项，并且我不想添加更多按钮。我正在寻找focusout() 作为可能的解决方案。不确定这是否最终是最好的，但我仍在尝试。