单击提交按钮时如何选择多选中的所有选项？答案

【问题标题】：How all options in a multiselect can be selected on clicking submit button?单击提交按钮时如何选择多选中的所有选项？
【发布时间】：2016-08-04 04:39:32
【问题描述】：

我有这 2 个多重选择，在选择/取消选择时效果很好。

问题：只要在提交之前选择了所有选项（蓝色）就没有问题，但是如果单击任何一个选择的选项（右侧），那么当我需要时，只有该选项会与表单一起提交没有选择的那个（右侧）。

更新：右侧的选择框是将值插入到 db 的地方。只要从左框移动后没有点击右框的值，右框的所有值都会插入到db中。但是，如果我从总共 5 个值中单击右侧框中的任何一个值，rest for 将被取消选择，并且只有选定的一个会插入到 db。

我想出了解决方案：

$('#formultiselect').click(function(){
    $('#to option').prop('selected', true);
});

第二个多选框：

<select multiple id="to" name="topics[]" style="float:left;">

</select>

最后是提交按钮：

<button id="formultiselect" type="submit" class="btn-medium col-sms-6 col-sm-4">UPDATE SETTINGS</button>

但是，它不起作用。

我的 JQuery 代码有什么问题吗？请帮忙？

【问题讨论】：

当您说“虽然我也需要未选中的那个”时，您是什么意思？那里没有选择两个选项，我看不到正在提交的表单。你不是POSTing 任何地方。
您需要进行更多调试并包含更多代码。我们无法判断 '#to option' 是否是正确的选择器，因为 HTML 不存在。更重要的是，提交是如何工作的？你确定是'selected', true 让它抓住了物品吗？
@NickBull，右侧的选择框是将值插入到 db 的地方。我刚刚更新了我的问题。
@dlsso，我已经提到了我所针对的选择器 html..

标签： jquery

【解决方案1】：

我怀疑可能发生的情况是表单在函数执行之前被提交。尝试使用.preventDefault() 阻止表单提交，然后在选择所有选项后以编程方式提交表单。

$('#formultiselect').click(function(event){
    event.preventDefault();
    $('#to option').prop('selected', true);
    $(this).submit();
});

【讨论】：

那行不通。我什至尝试创建一个具有相同 id 的新 div 以单击而不提交..
@CodeIgniter_Learner 你必须确保你没有任何重复的ID 值，也没有其他按钮类型等于submit
我没有任何重复的 id.. 我只是稍微更改了代码，而不是prop，我使用了$('#to option').attr('selected', 'selected');.. 这似乎有效。你认为它是一个不错的选择吗？因为在 Firefox 控制台中，它说“prop”不是一个有效的函数。
@CodeIgniter_Learner 我会这么认为。但我仍然会阅读attr vs prop stackoverflow.com/questions/5874652/prop-vs-attr

【解决方案2】：

我隐藏了原来的提交按钮并创建了一个类似 div 的按钮。

JS代码：

$('#formultiselect').click(function(){ // Clickable div id
    $('#to option').attr('selected', 'selected'); // Targeted Dropdown List
    $('#form').submit(); // Form Id
});

新创建的 div 按钮

<div id="formultiselect" style="background:#000;color:#fff;float:left;padding:7px 10px;cursor:pointer;">UPDATE PROFILE</div>

【讨论】：