web-dev-qa-db-ja.com

プロトタイプを使用してオプションを選択する方法

このselect要素を含むHTMLフォームがあるとします：

  <select name="mySelect" id="mySelect">
    <option value="1" id="option1">1</option>
    <option value="2" id="option2">2</option>
  </select>

プロトタイプを使用してオプション要素の1つを選択するにはどうすればよいですか？

Form.ElementのAPIリファレンス にリストされているメソッドは、これを助けていないようです。

編集：「選択」とは、オプション要素の「選択」属性と同等の効果を意味します。

javascripthtmlprototypejs
31
lutz
var options = $$('select#mySelect option');
var len = options.length;
for (var i = 0; i < len; i++) {
    console.log('Option text = ' + options[i].text);
    console.log('Option value = ' + options[i].value);
}

optionsは、#mySelectドロップダウンのすべてのオプション要素の配列です。それらの1つ以上を選択済みとしてマークする場合は、selectedプロパティを使用します。

// replace 1 with index of an item you want to select
options[1].selected = true;
33
RaYell

現在選択されているオプションを取得するには、次を使用します。

$$('#mySelect option').find(function(ele){return !!ele.selected})
15
DavidWinterbottom

nils petersohnはほぼ正解でしたが、通常、オプションの「id」属性は人々が選択しているものではありません。この小さな変更により機能します。

var selectThis = 'option1';
$$('select#mySelectId option').each(function(o) {
  if(o.readAttribute('value') == selectThis) { // note, this compares strings
    o.selected = true;
    throw $break; // remove this if it's a multi-select
  }
});
8
Chaz Meister Rock

これを試して：

$('mySelect').setValue(1); // or whatever value you want to select

これはoption1を選択します

7
some guest

選択する値がわかっていると仮定して、以下を試してください。

$('mySelect').value = 2; // 2 being the value you want selected
1
Alan Whipple

値で2番目のオプションを選択するには、これを使用できます。

var myChoice = '2';

$$('select#mySelectId option').each(function(o) {
    o.selected = o.readAttribute('value') == myChoice;
});
1
Qrizly
var itis = $(mySelectId).select('option[value="' + sValueToSelect + '"]');
if ( itis && itis.length > 0 )
    itis[0].selected = true;
1
Uncle Shmuel
var selectThis = 'option1';
$$('select#mySelect option').each(function(o){
      if(o.id==selectThis){o.selected = true;$break;}
});
0
nils petersohn