selectオブジェクト
selectオブジェクトは、フォームのセレクトボックスに関する情報をJavaScriptのオブジェクトとして取り扱います。
セレクトボックスの要素を取得する方法
セレクトボックスの各要素を取得する方法は、まず、selectタグのname属性に名前を指定します。次にセレクトボックス内の各要素(optionタグ)にも同様にname属性に名前を指定することにより以下の構文にて個々のオプションを取得することが可能となります。
document.フォーム名.selectオブジェクト名.options[index番号].value
同一グループのselectオブジェクトの数はlengthプロパティにより取得できるのでセレクトボックスの状態を全て確認する場合は、lengthプロパティにより数を取得してfor文を使用して順次取得します。
document.フォーム名.セレクトボックス名.options.length
以下のサンプルはフォーム内のセレクトボックスで選択されている値をメッセージボックスに表示しています。
<html>
<head>
<title>JavaScript select</title>
<script type="text/javascript">
function dispType(){
var f = document.fm.type;
for(var i = 0 ; i < f.options.length ; i++){
if(f.options[i].selected){
alert('選択した血液型：' + f.options[i].value );
}
}
}
</script>
</head>
<body>
<form name="fm">
血液型を選択してください
<select name="type">
<option value="A型">A型</option>
<option value="B型">B型</option>
<option value="O型">O型</option>
<option value="AB型">AB型</option>
</select>
<input type="button" value="確認" onclick="dispType()">
</form>
</body>
</html>
プロパティの設定方法
document.フォーム名.セレクトボックス名[index番号].property
以下はselectオブジェクトのプロパティの一覧です。
| プロパティ名 | 値 |
|---|---|
| length | オブジェクトの数 |
| name | オブジェクト名 |
| options | オプション項目 |
| selectedIndex | 選択されている項目 |
| type | オブジェクトのタイプ |
| defaultSelected | デフォルトで選択されている項目 |
| index | 項目の位置 |
| selected | 選択されている状態 |
| value | オブジェクト内の値 |
メソッドの設定方法
document.フォーム名.セレクトボックス名.method()
以下はselectオブジェクトのメソッドの一覧です。
| メソッド名 | 機能 |
|---|---|
| click() | クリック |
| toString() | オブジェクトを文字列に変える |
| blur() | フォーカスを移動する |
| focus() | フォーカスを与える |
| valueOf() | オブジェクトの値を返す |
| handeleEvent() | イベント取扱者を特定する |
| toSource() | オブジェクトの値を文字列で返す |
| 関連メンバ | 内容 |
|---|---|
| Text | テキストボックス |
| Textarea | テキストエリア |
| Checkbox | チェックボックス |
| Radio | ラジオボタン |
| Buttom | ボタン |
| Submit | 送信ボタン |
| Reset | リセットボタン |
| Hidden | 隠しフィールド |
| Password | パスワード入力ボックス |
| File | ファイル選択ボックス |