Selectオブジェクト

プロパティ

プロパティ 内容
options option要素への参照
size コントロールに含まれる項目数
  • 1 … ドロップダウンメニュー (drop-down menu)
  • 2以上 … リストボックス (list box)
value 選択されている最初のoption要素のvalue属性の値
selectedIndex 選択されている最初のoption要素のインデックス。何も選択されていない場合は-1
selectedOptions 選択されているoption要素への参照 ※一部のブラウザのみがサポート
multiple trueならば、複数項目の選択が可能
Properties - HTMLSelectElement - Web API Interfaces | MDN

valueプロパティは、Select.options[ Select.selectedIndex ].valueとして、選択項目の値を取得することと同義です。

選択されている項目の特定

リストから選択すると、下表のプロパティの値が更新されます。

プロパティ 値
value  
selectedIndex  
selectedOptions  
selectedOptions.length  

上記サンプルの要素は、次のように定義しています。

<select multiple="multiple" size="3">
    <option value="A">項目A</option>
    <option value="B">項目B</option>
    <option value="C">項目C</option>
</select>

項目の選択

selectedIndexに選択したいoption要素のインデックスを指定することで、選択項目をスクリプトから制御できます。またはvalueに値を指定すると、それにvalue属性が一致したoption要素が選択されます。HTML DOM Select value Property

テキストを変更すると、下のリストの選択項目が変化します。
text.onkeyup = function()
{
    Select.value = this.value;
}

selectに内包される、option要素のselectedプロパティからでも選択項目を制御できます。個別に要素を走査するのは手間ですが、この方法ならば複数の項目を選択できます。

for( var i = 0; i < Select.length; i++ )
{
    Select.options[ i ].selected = ( Select.options[ i ].value == X );
}

複数項目の選択を考慮しないならば、次のようにも記述できます。

for( var i = 0; i < Select.length; i++ )
{
    if( Select.options[ i ].value == X )
    {
        Select.selectedIndex = i;
        break;
    }
}

メソッド

Methods - HTMLSelectElement - Web API Interfaces | MDN

add

selectに要素を追加できます。

collection.add(item[, before]);
HTMLSelectElement.add() - Web API Interfaces | MDN

itemには、optionまたはoptgroup要素を渡します。

var select = document.createElement( 'select' );
select.add( new Option( 'a', '1' ) );
select.add( new Option( 'b', '2' ) );

alert( select.outerHTML );
// "<select><option value="1">a</option><option value="2">b</option></select>"

イベント

onchange

選択が変更されると、onchangeイベントが発生します。

選択されている項目を取得する場合、multiple属性によって複数項目の選択が許可されているかどうかによって処理が異なります。このmultiple属性の設定を取得するにはtypeプロパティを参照します。multipleが設定されているならば"select-multiple"が、さもなくば"select-one"が文字列で返されます。

実行例

選択された項目のvalue属性を表示します。

<select id="listbox" size="5">
  <option value="1">項目1</option>
  <option value="2">項目2</option>
  <option value="3">項目3</option>
</select>

<script type="text/javascript">
  var select = document.getElementById( 'listbox' );
  select.onchange = function()
  {
    // 選択されているoption要素を取得する
    var selectedItem = this.options[ this.selectedIndex ];

    alert( selectedItem.value );
  }
</script>

ドロップダウンメニューのonchangeイベント

Selectオブジェクトがドロップダウンメニュー (size属性なし) のときは、キーボードから選択を変更してもonchangeイベントが発生しないことがあります。

ドロップダウンメニューの選択項目を、キーボードやマウスで変更してください。そのとき発生したイベントがカウントされ、下表に表示されます。
イベント 発生回数
onchange  
onkeydown  

参考

≫イベントの使用方法

参考

関連ページ

JavaScriptのドキュメントから検索