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

Posted 2023-02-21

【中文标题】Javascript/jQuery：在多个选择中设置值（选择）

【英文标题】：Javascript/jQuery: Set Values (Selection) in a multiple Select

【发布时间】：2013-05-11 01:53:23

【问题描述】：

我有一个多选：

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

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

【问题讨论】：

所有这些示例都只适用于上面给出的硬编码值，而不适用于数据库中的真实字段值。一旦你用数据库替换值，例如：values = $('#').val();它不起作用，它只选择下拉列表的第一个值。而不是给出正确答案，如果我写了真值堆栈溢出会删除我的观点。

【参考方案1】：

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

【参考方案2】：

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

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

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

【讨论】：

那很酷，但是你怎么说选择的vlaues应该在id=string的“多选”中选择？

@user1824136 太好了，很高兴我今天早上能帮到别人！

如果我们还是要依赖 jQuery，更喜欢 ŁukaszW.pl$('#strings').val(values.split(','))。如果没有 jQuery，ŁukaszW.pl 的 Plain Old javascript document.getElementById('strings').value = ["Test", "Prof", "Off"] 也可以单行完成

【参考方案3】：

在 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 在 Chrome/mac 或 FF/mac 上不适合我。它对实际选择的内容没有影响，至少在浏览器中以可视方式显示。

它在我传递字符串时起作用，但在我传递数组时不起作用。

有同样的问题；这仅适用于字符串值，不适用于数组（使用纯 JS，而不是 jQuery）。

对于那些遇到此问题的人，您应该确保在 JavaScript 中设置值后触发“更改”事件。使用 jQuery 这将是 $("#strings").val(["Test", "Prof", "Off"]).trigger('change');

【参考方案4】：

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

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

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

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

【参考方案5】：

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

【参考方案6】：

纯 JavaScript ES6 解决方案

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

注意：Array#from 将 类数组 对象转换为数组，然后您就可以在其上使用 Array.prototype 函数，例如 find 或 地图。

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>

【参考方案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>

【参考方案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);