Javascript来选择多个选项

Question

我有一个选择框，允许多个选项的窗体。用户保存这些选项后，将它们存储在数据库表中。

然后我就可以阅读这个数据库表来获得他们选择了一个重新的选项。我需要能够从数据库中获取这些数据，并将其放入一个数组中，然后在选择“编辑”其选项时，可以在该选择框中预先选择这些选项。

数据读取到一个数组是好的，我知道如何使一个选择框内选择一个选项，但我不知道如何处理多个选项中的JavaScript被选中。

有人可以帮我找出所需的JavaScript来做到这一点？

Answer 1

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

虽然我同意这应该做到服务器端。

Answer 2

这种类型的事情应该做服务器端，以限制客户端对这种琐碎的任务上使用的资源量。话虽这么说，如果你做的前端，我建议你考虑使用类似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; 
    } 
} 

Answer 3

您可以通过document.getElementById("cars").options其中“汽车”是选择对象可以访问选定对象的选项数组。

一旦你有，你可以调用option[i].setAttribute('selected', 'selected');选择一个选项。

我同意每一个其他人，你是最好不过这样的服务器端。

Answer 4

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

Answer 5

基于@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');