二章第十三回 フォームの操作2
このページの最終更新日：
今回は前回の続きです。他のフォーム要素の使い方を見ましょう。
HTMLSelectElement
select要素のHTMLElementは、HTMLSelectElementといいます。これも、いろいろなプロパティを持っています。
inputと共通のプロパティ
同じフォームコントロールですから、inputなどと同じプロパティも多く持っています。form,disabled,blur,focusなどをinputと同じように使うことができます。
options
optionsは、そのselectが持つoption要素のHTMLOptionsCollectionです。これは、HTMLCollectionと同じように扱えます。さて、select要素の下にはoptionしか無いからchildNodesでいいのでは、と思うかもしれませんが、実はそういうわけにはいきません。実は、select要素の下にはoptionの他にoptgroupという要素がある可能性があります。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<form action="?">
<p>
<select>
<optgroup label="optgroup1">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</optgroup>
<option>option4</option>
<optgroup label="optgroup2">
<option>option5</option>
<option>option6</option>
<option>option7</option>
</optgroup>
</select>
</p>
</form>
</body>
</html>
やはりoptionが分散してしまいやりにくいので、それをまとめて扱うoptionsを使います。
ちなみに、select要素はlengthというプロパティを持っていて、これはそのselectが持っているoption要素の数なので、つまりelements.lengthと同じです。
selectedIndex
selectedIndexは、今選択されているoptionの番号を取得するプロパティです。番号だから、数値です。もちろん、一番上が0、次が1、その次が2・・・と続きます。ちなみに、何も選択されていない場合というのもあります。この場合-1が返されます。
optionの追加と除去
HTMLSelectElementは、option要素を追加したり除去したりするメソッドを持っています。追加するのがaddで、除去するのがremoveです。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<form action="?">
<p>
<select id="aaa">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</p>
<script type="text/javascript">
var select = document.getElementById('aaa');
var option = document.createElement('option');
option.text="option4";
select.add(option, select.options.item(0) );
</script>
</form>
</body>
</html>
addは、実はinsertBefore（二章第六回で解説）と同じ使い方をします。第一引数（ひとつめの引数）には追加するノードを、第二引数には追加するところの直後にあるノード（追加した後に新しいノードの後ろに来るノード）を指定します。
追加するoption要素を作っているところは、二章第五回で解説しました。option要素を追加するための専用メソッドとはいえ、insertRowのようにoption要素が自動で作られるわけではないので注意しましょう。
ただ、optionの子のテキストノードを追加するかわりに、textというプロパティに代入しています。このプロパティは実はそのoptionの文字列、つまり子のテキストノードのnodeValueと同じです。ですから、このtextプロパティに文字列を代入することで、option要素の子となるテキストノードの内容（表示されるラベル）を変更できます。第二章第十回に出てきたtitle要素やscript要素のtextプロパティと同じ感じですね。
こうしてできたoption要素を、addメソッドで追加しています。第二引数がselect.options.item(0)、つまり最初のoption要素です。その直前に追加されるので、一番上に来るということになります。
対して、removeの使い方はこうです。
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<form action="?">
<p>
<select id="aaa">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
</p>
<script type="text/javascript">
var select = document.getElementById('aaa');
select.remove(0);
</script>
</form>
</body>
</html>
removeは、除去するノードを引数に渡すのではなく、optionの番号を引数に渡します。そうすると、その番号のoption要素が除去されます。これも、当然最初が0で、次が1・・・となります。
このサンプルでは0だから、0番目、つまり最初のoptionが除去されています。
HTMLOptionElement
option要素のHTMLElementはHTMLOptionElementといい、これもいろいろプロパティを持っています。textプロパティは先ほど紹介しましたね。
まず、input要素などやselect要素と同じようにformやdisabledプロパティを持っています。
他にoption特有のものは、indexプロパティです。そのoptionが親のselectの中で何番目かを表す数値です。
また、valueは、value属性の値です。
selectedは、そのoptionが今選択されているかどうかで、真偽値です。