我有多个选择:
<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";
如何设置这个值在多重选择?已经尝试过改变阵列中的字符串,并把它作为在多重价值,但不工作...!有人可以帮我弄这个吗?谢谢!!!
通过使用在利用所述属性选择一个动态选择的值的循环迭代。
var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
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做显著抽象。
只是提供具有值的数组jQuery的Val函数:
var values = "Test,Prof,Off";
$('#strings').val(values.split(','));
并获得相同的格式选择的值:
values = $('#strings').val();
querySelectorAll
功能每个选项和拆分values
字符串。Array#forEach
的每个元素从values
阵列迭代。Array#find
找到匹配的给定值的选项。selected
true
属性。注:Array#from
转换阵列状物体到一个数组,然后你就可以使用Array.prototype
功能就可以了,如发现或地图。
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>
出于某种原因,你不使用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>
基本上做到通过所得阵列的values.split(',')
然后循环,并设置选择。
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