Javascript/jQuery：在多选中设置值（选择）

Javascript/jQuery: Set Values (Selection) in a multiple Select

提问by Zwen2012

I have a multiple 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>

I load data from my database. Then I have a string like this:

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

var values="Test,Prof,Off";

How can I set this Values in the multiple select? Already tried change the string in an array and put it as value in the multiple, but doesnt work...! Can someone help me with this? THANKS!!!

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

回答by Kevin Bowersox

Iterate through the loop using the value in a dynamic selector that utilizes the attribute selector.

使用使用属性选择器的动态选择器中的值遍历循环。

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

Working Examplehttp://jsfiddle.net/McddQ/1/

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

回答by ?ukaszW.pl

in jQuery:

在 jQuery 中：

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

or in pure JavaScript:

或在纯 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 does significant abstraction here.

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

回答by PostureOfLearning

Just provide the jQuery val function with an array of values:

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

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

And to get the selected values in the same format:

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

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

回答by kind user

Pure JavaScript ES6 solution

纯 JavaScript ES6 解决方案

• Catch every option with a querySelectorAllfunction and split the valuesstring.
• Use Array#forEachto iterate over every element from the valuesarray.
• Use Array#findto find the option matching given value.
• Set it's selectedattribute to true.

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

Note: Array#fromtransforms an array-likeobject into an array and then you are able to use Array.prototypefunctions on it, like findor map.

注意：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>

回答by kashipai

Basically do a values.split(',')and then loop through the resulting array and set the Select.

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

回答by Mariano Desanze

Pure JavaScript ES5 solution

纯 JavaScript ES5 解决方案

For some reason you don't use jQuery nor ES6? This might help you:

出于某种原因，您不使用 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>

回答by Xavier Moreno

this is error in some answers for replace |

这是替换的某些答案中的错误 |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

this correction is correct but the | In the end it should look like this \|

这个更正是正确的，但| 最后它应该看起来像这样 \|

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);

回答by Member con

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