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

rkttyhzu  于 2023-01-30  发布在  jQuery
关注(0)|答案(9)|浏览(266)

我有多项选择:

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

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

8wtpewkr

8wtpewkr1#

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

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

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

oknwwptz

oknwwptz2#

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

3bygqnnd

3bygqnnd3#

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

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

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

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

b1payxdu4#

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

mcdcgff05#

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
at0kjp5o

at0kjp5o6#

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

xxb16uws

xxb16uws7#

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

9jyewag08#

使用此命令:

$('#demo').multiselect('select', value);

对于多个值只需使用一个循环对于更多的属性this页面是非常好的

66bbxpm5

66bbxpm59#

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

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

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

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

相关问题