我有一个带有允许多个选项的选择框的表单。用户保存这些选项后，会将它们存储在数据库表中。
然后我可以读取此数据库表以再次获取他们选择的选项。我需要能够从数据库中获取这些数据，将其放入一个数组中，然后在他们“编辑”他们的选项时预先选择该选择框中的选项。
将数据读入数组很好，我知道如何在选择框中选择单个选项，但是我不确定如何处理在 javascript 中选择的多个选项。
有人可以帮我找出执行此操作所需的 javascript 吗？
【问题讨论】：
标签： javascript forms html-select options
您可以通过document.getElementById("cars").options 访问选定对象的选项数组，其中“汽车”是选定对象。
一旦你有了，你可以打电话给option[i].setAttribute('selected', 'selected');来选择一个选项。
我同意其他所有人的观点，不过你最好还是做这个服务器端。
【讨论】：
基于@Peter Baley 的回答，我创建了一个更通用的函数：
@objectId: HTML object ID
@values: can be a string or an array. String is less "secure" (should not contain repeated value).
function checkMultiValues(objectId, values){
selectMultiObject=document.getElementById(objectId);
for ( var i = 0, l = selectMultiObject.options.length, o; i < l; i++ )
{
o = selectMultiObject.options[i];
if ( values.indexOf( o.value ) != -1 )
{
o.selected = true;
} else {
o.selected = false;
}
}
}
示例：checkMultiValues('thisMultiHTMLObject','a,b,c,d');
【讨论】：
o.selected = (values.indexOf (o.value) != -1) 将使if-block 过时。
这类事情应该在服务器端完成，以限制客户端用于此类琐碎任务的资源量。话虽如此，如果您要在前端执行此操作，我建议您考虑使用 underscore.js 之类的东西来保持代码简洁：
var values = ["Red", "Green"],
colors = document.getElementById("colors");
_.each(colors.options, function (option) {
option.selected = ~_.indexOf(values, option.text);
});
如果你使用 jQuery，它可能会更简洁：
var values = ["Red", "Green"];
$("#colors option").prop("selected", function () {
return ~$.inArray(this.text, values);
});
如果您要在没有 underscore.js 或 jQuery 之类的工具的情况下执行此操作，您将需要编写更多内容，并且可能会发现它有点复杂：
var color, i, j,
values = ["Red", "Green"],
options = document.getElementById("colors").options;
for ( i = 0; i < values.length; i++ ) {
for ( j = 0, color = values[i]; j < options.length; j++ ) {
options[j].selected = options[j].selected || color === options[j].text;
}
}
【讨论】：
<script language="JavaScript" type="text/javascript">
<!--
function loopSelected()
{
var txtSelectedValuesObj = document.getElementById('txtSelectedValues');
var selectedArray = new Array();
var selObj = document.getElementById('selSeaShells');
var i;
var count = 0;
for (i=0; i<selObj.options.length; i++) {
if (selObj.options[i].selected) {
selectedArray[count] = selObj.options[i].value;
count++;
}
}
txtSelectedValuesObj.value = selectedArray;
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'Tutorial004NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'Tutorial004NewWindow';
// submit
frm.submit();
}
//-->
</script>
The HTML
<form action="tutorial004_nw.html" method="get">
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td valign="top">
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
<input type="button" value="Loop Selected" onclick="loopSelected();" />
<br />
<select name="selSea" id="selSeaShells" size="5" multiple="multiple">
<option value="val0" selected>sea zero</option>
<option value="val1">sea one</option>
<option value="val2">sea two</option>
<option value="val3">sea three</option>
<option value="val4">sea four</option>
</select>
</td>
<td valign="top">
<input type="text" id="txtSelectedValues" />
selected array
</td>
</tr>
</table>
</form>
【讨论】：
纯 JavaScript 解决方案
<select id="choice" multiple="multiple">
<option value="1">One</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<script type="text/javascript">
var optionsToSelect = ['One', 'three'];
var select = document.getElementById( 'choice' );
for ( var i = 0, l = select.options.length, o; i < l; i++ )
{
o = select.options[i];
if ( optionsToSelect.indexOf( o.text ) != -1 )
{
o.selected = true;
}
}
</script>
虽然我同意这应该在服务器端完成。
【讨论】：
Array.prototoype.indexOf 在 IE 9 之前不可用。