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

IT技术 javascript jquery multiple-select
2021-01-30 08:51:34

我有多项选择:

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

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

6个回答

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

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

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

如果我们无论如何都要依赖 jQuery,那么更喜欢 ŁukaszW.pl $('#strings').val(values.split(','))没有 jQuery,ŁukaszW.pl 的普通旧 Javascriptdocument.getElementById('strings').value = ["Test", "Prof", "Off"]也可以单行完成
2021-03-26 08:51:34
那很酷,但是你怎么说选定的vlaues应该在id=string的“多选”中被选中?
2021-04-07 08:51:34
@user1824136 太好了,很高兴我今天早上可以帮助某人!
2021-04-10 08:51:34

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

对于那些遇到此问题的人,您应该确保在 JavaScript 中设置值后触发“更改”事件。使用 jQuery 这将是 $("#strings").val(["Test", "Prof", "Off"]).trigger('change');
2021-03-15 08:51:34
有同样的问题;这仅适用于字符串值,不适用于数组(使用纯 JS,而不是 jQuery)。
2021-03-19 08:51:34
嗯,纯 javascript 在 Chrome/mac 或 FF/mac 上对我不起作用。它对实际选择的内容没有影响,至少对在浏览器中视觉上选择的内容没有影响。
2021-03-22 08:51:34
这对我来说很完美,我的“选择”选择......必须一次添加所有值(就像你上面说的那样)
2021-03-23 08:51:34
它在我传递字符串时工作,但在我传递数组时不起作用。
2021-04-13 08:51:34

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

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

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

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

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

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