Javascript / jQuery：在多个select中设置值（select）

我有一个多select：

<select name='strings' id="strings" multiple style="width:100px;"> <option value="Test">Test</option> <option value="Prof">Prof</option> <option value="Live">Live</option> <option value="Off">Off</option> <option value="On">On</option> </select> 

我从我的数据库加载数据。 然后我有这样一个string：

 var values="Test,Prof,Off"; 

我怎样才能在多重select中设置这个值？ 已经尝试更改数组中的string，并将其作为值的倍数，但没有工作…！ 有人可以帮我弄这个吗？ 谢谢！！！

Answer 1

在使用属性select器的dynamicselect器中使用值遍历循环。

 var values="Test,Prof,Off"; $.each(values.split(","), function(i,e){ $("#strings option[value='" + e + "']").prop("selected", true); }); 

工作示例 http://jsfiddle.net/McddQ/1/

Answer 2

在jQuery中：

 $("#strings").val(["Test", "Prof", "Off"]); 

或纯javascript：

 document.getElementById('strings').value = ["Test", "Prof", "Off"]; 

Answer 3

只要提供一个值的数组的jQuery val函数：

 var values = "Test,Prof,Off"; $('#strings').val(values.split(',')); 

并以相同的格式获取选定的值：

 values = $('#strings').val(); 

Answer 4

基本上做一个values.split（'，'），然后遍历结果数组，并设置select。

Answer 5

 var groups = ["Test", "Prof","Off"]; $('#fruits option').filter(function() { return groups.indexOf($(this).text()) > -1; //Options text exists in array }).prop('selected', true); //Set selected 

Answer 6

纯粹的JavaScript ES6解决scheme

• 使用querySelectorAll函数捕获每个选项并拆分valuesstring。
• 使用Array#forEach遍历values数组中的每个元素。
• 使用Array#find查找与给定值匹配的选项。
• 将它的selected属性设置为true 。

注意 ： Array#from将类似数组的对象转换为一个数组，然后您可以使用Array.prototype函数（如find或map） 。

 var values = "Test,Prof,Off", options = Array.from(document.querySelectorAll('#strings option')); values.split(',').forEach(function(v) { options.find(c => c.value == v).selected = true; }); 

 <select name='strings' id="strings" multiple style="width:100px;"> <option value="Test">Test</option> <option value="Prof">Prof</option> <option value="Live">Live</option> <option value="Off">Off</option> <option value="On">On</option> </select> 

Answer 7

纯粹的JavaScript ES5解决scheme

出于某种原因，你不使用jQuery和ES6？ 这可能会帮助你：

 var values = "Test,Prof,Off"; var splitValues = values.split(','); var multi = document.getElementById('strings'); multi.value = null; // Reset pre-selected options (just in case) var multiLen = multi.options.length; for (var i = 0; i < multiLen; i++) { if (splitValues.indexOf(multi.options[i].value) >= 0) { multi.options[i].selected = true; } } 

 <select name='strings' id="strings" multiple style="width:100px;"> <option value="Test">Test</option> <option value="Prof">Prof</option> <option value="Live">Live</option> <option value="Off">Off</option> <option value="On" selected>On</option> </select>