概要
select要素は、セレクトボックス、リストボックス、ドロップダウンリストなどと呼ばれ、複数項目の中からユーザーが1つあるいは複数の項目を選択し、スクリプトがそれを利用する。
たとえば上のselect要素は、HTMLでは以下のように書いている。select要素はoption要素を項目分だけ子要素に持つ。option要素のvalue属性は、スクリプトから参照されたときに得られる値。
|
1 2 3 4 5 6 |
<select> <option value="bloodtype_a">A型</option> <option value="bloodtype_b">B型</option> <option value="bloodtype_o">O型</option> <option value="bloodtype_ab">AB型</option> </select> |
属性
multiple
select要素にmultiple属性を指定すると、複数要素を選択できるようになる。多くのブラウザーでは形状がリストボックスになり、CTRLキーやSHIFTキーを押しながら2つ以上の要素を選択可能となる。
|
1 2 3 4 5 6 7 |
<select multiple> <option value="soup">スープ</option> <option value="salad">サラダ</option> <option value="pasta">パスタ</option> <option value="meet">肉料理</option> <option value="fish">魚料理</option> </select> |
selected
option要素にselected属性を付けると、その選択肢が選択状態になる。multiple属性を指定しない場合に複数のoption要素にselectedを指定した場合、最後に近い方の要素が選択される。
|
1 2 3 4 5 6 |
<select> <option value="bloodtype_a">A型</option> <option value="bloodtype_b" selected>B型</option> <option value="bloodtype_o" selected>O型</option> <option value="bloodtype_ab">AB型</option> </select> |
multiple属性を指定した場合は、selectedを指定したすべてのoption要素が選択される。
|
1 2 3 4 5 6 7 |
<select multiple> <option value="soup">スープ</option> <option value="salad" selected>サラダ</option> <option value="pasta">パスタ</option> <option value="meet" selected>肉料理</option> <option value="fish">魚料理</option> </select> |
実装例