Javascript/jQuery:在多个Select中设置值(选择)

Question

我有一个多选:

<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>

我从我的数据库加载数据.然后我有一个像这样的字符串:

var values="Test,Prof,Off";

如何在多重选择中设置此值？已经尝试更改数组中的字符串并将其作为值放在多个中,但不起作用......!有人可以帮我弄这个吗？谢谢!!!

Answer 1

使用使用属性选择器的动态选择器中的值迭代循环.

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中:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQuery在这里做了重要的抽象.

Answer 3

只需为jQuery val函数提供一组值:

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

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

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

Answer 4

纯JavaScript ES6解决方案

• 使用querySelectorAll函数捕获每个选项并拆分values字符串.
• 使用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>