Javascript / jQuery:在乘法中设置值(选择)

我有一个多选:

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

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

Zwen2012 asked 2019-09-19T01:01:05Z
7个解决方案
108 votes

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

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

工作实例[http://jsfiddle.net/McddQ/1/]

Kevin Bowersox answered 2019-09-19T01:01:25Z
89 votes

在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在这里做了重要的抽象。

ŁukaszW.pl answered 2019-09-19T01:02:01Z
16 votes

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

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

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

values = $('#strings').val();
PostureOfLearning answered 2019-09-19T01:02:31Z
6 votes

纯JavaScript ES6解决方案

  • 使用<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>函数捕获每个选项并拆分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>迭代<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>数组中的每个元素。
  • 使用<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>查找与给定值匹配的选项。
  • 将它的<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>属性设置为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>将类似数组的对象转换为数组,然后您可以在其上使用<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>函数,如find或map。

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

kind user answered 2019-09-19T01:03:37Z
1 votes

纯JavaScript ES5解决方案

出于某种原因你不使用jQuery或ES6? 这可能对您有所帮助:

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

Mariano Desanze answered 2019-09-19T01:04:16Z
1 votes

基本上做一个values.split(',')然后遍历生成的数组并设置Select。

kashipai answered 2019-09-19T01:04:41Z
0 votes
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
Member con answered 2019-09-19T01:04:59Z
translate from https://stackoverflow.com:/questions/16582901/javascript-jquery-set-values-selection-in-a-multiple-select