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


100

我有多种选择:

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

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

Answers:


133

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

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

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


1
太好了,但是您怎么说在“多重选择”中使用id = string选择选定的vlaues?
Zwen2012

@ user1824136太好了,很高兴今天早上我可以帮助某人!
凯文·鲍尔索克斯

1
如果我们仍然要依赖jQuery,则更喜欢ŁukaszW.pl $('#strings').val(values.split(','))。如果没有jQuery,ŁukaszW.pl的Plain Old Javascript document.getElementById('strings').value = ["Test", "Prof", "Off"]也可以单线完成
KyleMit

109

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


1
这对我来说非常完美,我的“选择”选择...必须一次添加所有值(就像您上面所说的一样)
Todd Vance 2014年

4
嗯,纯JavaScript不适用于Chrome / mac或FF / mac。它对实际选择的内容没有任何影响,至少对在浏览器中以可视方式显示的内容没有影响。
比尔·基斯

3
当我传递字符串时,它起作用,但当我传递数组时,它不起作用。
拉维G

有同样的问题;这仅适用于字符串值,不适用于数组(使用纯JS,不适用于jQuery)。
jayp's

1
对于遇到此问题的用户,应确保在JavaScript中设置值后触发“更改”事件。使用jQuery的是$(“#strings”)。val([“ Test”,“ Prof”,“ Off”])。trigger('change');
乔恩·怀亚特

20

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

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

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

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

8

纯JavaScript ES6解决方案

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


2

基本上执行a values.split(','),然后遍历结果数组并设置Select。


1

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


0
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

0

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

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

此更正是正确的,但| 最后应该看起来像这样

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.