如何通过单击提交按钮选择多选中的所有选项？

Question

我有这两个多选项，在选择/取消选择时工作正常。

问题：只要在提交之前选择了所有选项（彩色蓝色）都没有问题，但是如果点击了这些选定选项（右侧）中的任何一个，那么只有该选项会随表格一起提交未选择的那个（右侧）。

更新：从右侧的选择框中将值插入到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代码有什么问题吗？请帮忙吗？

Answer 1

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

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

Answer 2

首先，测试是否选择了任何内容。如果是，则仅获取选择值，否则从<select id="to">获取所有选定值：

// Will have no value if no selection
if ($('#to').val()) {
    // Get the selected item
    var selectedValue = $('#to').find(":selected").text()
    console.log(selectedValue);
} else {
    // Do something with every option
    $("#to option").each(function() {
        console.log($(this).val());
    }
}

Answer 3

我隐藏了原始的提交按钮并创建了一个类似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>