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

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>

Answer 5

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

Answer 6

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 7

纯 JavaScript ES5 解决方案

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

Answer 8

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

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

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

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