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,并将其作为值的倍数,但没有工作…! 有人可以帮我弄这个吗? 谢谢!!!

在使用属性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/

在jQuery中:

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

或纯javascript:

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

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

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

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

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

基本上做一个values.split(','),然后遍历结果数组,并设置select。

 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 

纯粹的JavaScript ES6解决scheme

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

注意Array#from类似数组的对象转换为一个数组,然后您可以使用Array.prototype函数(如findmap)

 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> 

纯粹的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>