如何使用 jQuery 在多选列表中选择选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2049710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select options in Multiple select list with jQuery?
提问by Sorin Antohi
I have two dropdowns. When a user selects a value from the first one I want in the second (which has the multiple select option), with jQuery, to select some values automatically. How can I do that?
我有两个下拉菜单。当用户从我想要的第二个（具有多选选项）中的第一个值中选择一个值时，使用 jQuery 自动选择一些值。我怎样才能做到这一点？
First select box:
<select id="update_carte_s" name="update_carte_s">
<option value="5!**8,9**!6!44.9">Ghid complet Internet</option>
<option value="6!**6,7**!6!24.95">PC pas cu pas</option>
<option value="7!**10**!3!27.95">Jocul ingerului</option>
<option value="8!**11,12**!8!39">Ghidul vinurilor</option>
</select>
Second select box:
<select id="uc_autori_s" name="uc_autorilist[]" size="5" multiple>
<option value="3">Rose Tremain</option>
<option value="4">Jonathan Coe</option>
<option value="5">Cecilia Ahern</option>
<option value="6">Marinel Serban</option>
<option value="7">Emanuela Cherchez</option>
<option value="8">Peter Buckley</option>
<option value="9">Clark Duncan</option>
<option value="10">Carlos-Ruiz Zafon</option>
<option value="11">Catalin Paduraru</option>
<option value="12">Dan-Silviu Boerescu</option>
</select>
The bolded values from the first select box split by ,are the values that I want to select from the second select box. For example 11,12would mean in the second box options with values 11 and 12 to be selected.
第一个选择框拆分的粗体值,是我想从第二个选择框中选择的值。例如，11,12将意味着在第二个框中选择值 11 和 12 的选项。
Currently I have something like this:
目前我有这样的事情：
$.bookAuthors = $.bookDetailsArray[1].split(',');
$.each($.bookAuthors, function( intIndex, objValue ){
$("#uc_autori_s").val(objValue).attr("selected","selected");
});
but the problem is that only the last value is selected in my case 12 (selection of 11 is lost).
但问题是在我的案例 12 中只选择了最后一个值（11 的选择丢失）。
回答by SurferJoe
You can pass a select with multiple values an array
您可以将具有多个值的选择传递给数组
$("#uc_autori_s").val( $.bookAuthors );
回答by bdukes
You're not going to be able to use the valmethod to set multiple options as selected. Instead, you should select the option itself, and set its selected attribute:
您将无法使用该val方法将多个options设置为选中状态。相反，您应该选择选项本身，并设置其 selected 属性：
$('#uc_autori_s option[value=' + objValue + ']').attr('selected', true);
回答by codingpuss
For example, you have a select box like this one:
例如，您有一个这样的选择框：
<select id="books">
<option value="1">Harry Porter</option>
<option value="2">Eragon</option>
<option value="3">Gadfly</option>
<option value="4">C++ For Dummies</option>
<option value="5">Android Cookbook</option>
</select>
The way to select multiple options (Eragon, Gadfly for example) is to create an object that contains values of options you want to select, then use this:
选择多个选项（例如 Eragon、Gadfly）的方法是创建一个包含要选择的选项值的对象，然后使用：
var options = ["2", "3"];
$("#books").val(options);
回答by Aleksey
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
$("#multiple").val(["Multiple2", "Multiple3"]);
</script>
回答by Athul Nalupurakkal
Here is the simple way to find and select multi select dropdown
这是查找和选择多选下拉菜单的简单方法
$('#selectID ').children("option[value=" + myValue + "]").prop("selected", true);
回答by Majid Ali Khan
You need to do following to select values in multiselect. Since multiselect returns an array of values when selected, so the same needs to be given to it when its values are to be set by default.
您需要执行以下操作以在多选中选择值。由于 multiselect 在被选中时返回一个值数组，所以当它的值被默认设置时，需要给它同样的值。
<select id="sonyConsoles" multiple>
<option value="1">PS4 Pro</option>
<option value="2">PS4</option>
<option value="3">PS3</option>
<option value="4">PS Vita</option>
<option value="5">PSP</option>
</select>
If you wish options 1,2 and 4 to be selected by default then do; $('#sonyConsoles').val([1,2,4]);
如果您希望默认选择选项 1,2 和 4，则执行；$('#sonyConsoles').val([1,2,4]);
This will return the selectBox which has option 1,2 and 5 selected.
这将返回选择了选项 1,2 和 5 的 selectBox。
回答by Zeeshan
The most simplest and updated way of jQuery is to use the map function
jQuery最简单更新的方式就是使用map函数
var abc = $("select option:selected").map(function() {
return this.value;
}).get().join(",");
回答by Tobi G.
You have to remove the current options in order to manipulate the selected options.
您必须删除当前选项才能操作所选选项。
Here is an example how to append options:
以下是如何附加选项的示例：
<select id="mySelectId">
<option value=""></option>
<option value="Argentina">Argentina</option>
<option value="Germany">Germany</option>
<option value="Greece">Greece</option>
<option value="Japan">Japan</option>
<option value="Thailand">Thailand</option>
</select>
<script>
mySelect = $('#mySelectId');
var selected = mySelect.val(); //get current values
selected = selected.concat(['Germany','Argentina']); //merge with new values
selected = Array.from(new Set(selected)); //make values unique
mySelect.val(null); //delete current options
mySelect.val(selected); //add new options
</script>
For chosen.js add:
对于 selected.js 添加：
<script>
mySelect.trigger('chosen:updated');
</script>
