Tweet

select要素とoption要素の属性、JavaScriptで選択（selected）する方法

select要素とoption要素の基本事項と、JavaScriptでそれらの選択肢を選択する方法。

select要素

select 要素は、プルダウンメニューやセレクトボックスなどと呼ばれる選択式のメニューを作ることができ、以下のような属性がある。

• name
  名前
• size
  sizeを指定しない場合やsizeが1以下の場合、セレクトボックスは通常1行で表示されるが、2以上の値を指定すると表示する行数を増やせる。 複数選択させたい場合などに活用できる。
• multiple
  multipleを指定しない場合は択一だが、multipleを指定すると複数選択できるようになる。 Windowsの場合、複数選択したいときは「Ctrl」キーを押しながら選択肢をクリックする。
• disabled
  無効化

選択肢を複数選択させたい場合はチェックボックスがよく使われるので、multiple が使われてるサイトはあまり見たことがない。

select 要素は通常 option 要素とともに使用される。

記述例

<select name="example" size="3" multiple>
<option value="example1">サンプル1</option>
<option value="example2">サンプル2</option>
<option value="example3">サンプル3</option>
</select>

表示例
サンプル1 サンプル2 サンプル3

option要素

option 要素は通常 select 要素とともに使用され、上述の通り選択式のメニューを作ることができる。 option 要素には以下のような属性がある。

• value
  選択肢が持つ値。フォームではこの値が送信される。
• selected
  selectedを指定すると、選択肢が予め選択された状態になる。 通常1箇所だけ記述できるが、select 要素に multiple を指定すると複数記述できる。
• disabled
  無効化

属性は他にもあるが、よく使うのはこの辺り。 option 要素を複数書くことで、複数の選択肢を作れる。

記述例

<select name="test">
<option value="test1">テスト1</option>
<option value="test2" selected>テスト2</option>
<option value="test3">テスト3</option>
</select>

表示例
テスト1 テスト2 テスト3

JavaScript で選択（selected）する

option 要素の selected を動的に変更したり、フォームの送信後、ユーザーが選択した内容を反映（維持）して表示したい場合がある。

例えば以下のようなプルダウンメニューがあるとする。

<select id="aiu">
<option value="aaa">あああ</option>
<option value="iii">いいい</option>
<option value="uuu">ううう</option>
</select>

JavaScript を使って2番目の選択肢「いいい」を選択した状態にするには以下のように書く。

<script>
document.getElementById('aiu').options[1].selected = true;
</script>

選択肢の上から順に options[0]、options[1]、options[2] となっている。 true で選択し、false で選択を解除できる。 また、multiple を指定している場合は、複数の選択肢を true にできる。

ただ、フォームの送信後などは値（value）を使った方が簡単な場合もあり、以下のように書ける。

<script>
document.getElementById('aiu').value = 'iii';
</script>

select 要素の値を指定すると、ブラウザは option 要素の該当する選択肢を選択した状態にしてくれる。 ただし、選択できるのは1つだけ。

また、選択されている選択肢の Index は selectedIndex で取得できる。option 要素の上から順に 0、1、2、・・・となっていて、何も選択していない場合は -1 になる。

<script>
console.log(document.getElementById('aiu').selectedIndex);
</script>