Javascript to Select複数のオプション

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に移動すると、選択したオブジェクトのオプション配列にアクセスできます。ここで、「cars」は選択オブジェクトです。

これを受け取ったら、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');