web-dev-qa-db-ja.com

複数のオプションを選択するJavaScript

複数のオプションを許可する選択ボックス付きのフォームがあります。ユーザーがこれらのオプションを保存すると、データベーステーブルに保存されます。

次に、このデータベーステーブルを読み取って、選択したオプションを再度取得できます。データベースからこのデータを取得して配列に入れ、オプションを「編集」するときに、その選択ボックスのオプションを事前に選択できるようにする必要があります。

データを配列に読み込むことは問題なく、選択ボックス内で単一のオプションを選択する方法はわかっていますが、JavaScriptで選択されている複数のオプションを処理する方法がわかりません。

誰かがこれを行うために必要なJavaScriptを理解するのを手伝ってくれる？

javascriptformshtml-selectoptions
17
Dave Hunt

純粋な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>

これはサーバー側で行う必要があることに同意しますが。

20
Peter Bailey

この種のことはサーバー側で行う必要があります。そうすることで、そのような些細なタスクのためにクライアントで使用されるリソースの量を制限できます。そうは言っても、フロントエンドで行う場合は、コードを簡潔かつ簡潔にするために nderscore.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;
    }
}
4
Sampson

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

0
Cedric Simon
<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>
0
Avinash

document.getElementById("cars").optionsに移動すると、選択したオブジェクトのオプション配列にアクセスできます。「cars」は選択オブジェクトです。

それができたら、option[i].setAttribute('selected', 'selected');を呼び出してオプションを選択できます。

私はあなたがこのサーバー側をやっている方が良いという他のすべての人に同意します。

0
PaddyDwyer