input要素と少し違うため、たまに扱おうとすると忘れてます。備忘録です。
シンプルなセレクトボックス
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" value="3を選ぶ" />
こんなソースの場合、buttonを押したときに任意のoptionタグへ選択状態を切り替えるときは"selectedIndex"を使います。
selectElement.selectedIndex = 2;
"selectedIndex"は、select要素のvalue値などは見ずにoption要素の数と上からの順番をもとに選択状態を決定します。
上の例ではoptionタグが7つありますが、プログラムではカウントがゼロスタートですので、0～6になります。3番目の要素を選択状態にするには'2'を指定します。
なお、'-1'を指定すると未選択状態となります。
マルチプルなセレクトボックス
<select size="5" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" value="2と3を選ぶ" />
マルチプルなセレクトボックスの場合、複数の要素を選択状態にすることができます。selectタグのsize属性はセレクトボックスの縦幅を広げますが、multiple属性を指定していなければ複数選択はできません。
前述の"selectedIndex"では、複数の選択状態を扱うことができません。たぶん。
そんなときはoptionsとselectedを使います。
selectElement.options[n].selected = true;
select要素のoptionsはoption要素を配列で持っています。'n'は先ほどと同様にゼロスタートで、options[n]は”n番目のoption要素"にアクセスできます。
上記では、"n番目のoption要素のselected属性をtrueにする"という操作をしています。つまり、"n番目を選択状態にする”ってことになります。
なお、上のボタンには"selectedIndex"で'-1'を指定して未選択状態にしたあと、[1]と[2]のselectedをtrueにするスクリプトを組み込んであります。
セレクトボックスの呼び方
蛇足です。
セレクトボックスにはたくさんの呼び方があります。
- セレクトボックス
- ドロップダウン
- コンボボックス
- プルダウン
- リストボックス
他にもあるかもしれません。
私はそれぞれ以下のように認識しています。
ドロップダウン
セレクトボックスの「▽」ボタンの部品を指します。
ドロップダウンを押すことで、ドロップダウンリストが表示されるのが一般的なセレクトボックスです。
コンボボックス
大まかに言えば、入力可能なセレクトボックスです。
VBAやMaskatなどでよく使われる部品です。
リストボックス＋テキストボックス＝コンボボックスです。
プルダウン
直訳すれば「引き下ろす」ということになります。
つまり、シンプルなセレクトボックスです。
マルチプルなセレクトボックスだと意味が合いません。
ドロップダウンメニューも同じような感じでしょうか。
リストボックス
プルダウンとは逆で、マルチプルなセレクトボックスです。ボックス状のリストですね。
とはいえ、マルチプルなセレクトボックスをリストボックスとは呼びますが、リストボックス自体はシンプルなセレクトボックスも指すことが多いです。
セレクトボックス
個人的には、選択できる部品の総称として使っています。
