JavaScriptのselectオブジェクトは、HTMLのselect要素を表わす

Elementオブジェクトのプロパティ、メソッド及びイベントもサポートする。

目次

selectオブジェクトのプロパティ

JavaScriptのSelectオブジェクトには次のプロパティがある。

Selectオブジェクトのプロパティ
プロパティ説明
disabled 要素が無効かどうか
form フォーム要素の参照
length ドロップダウンリストに含まれるoption要素の数
mutiple 複数選択できるかどうか
name 名前(name属性の値)
selectedIndex 選択されているoptionのインデックス(0〜)
size 要素の数
type フォーム要素のタイプ

selectオブジェクトの使用例

JavaScriptのselectオブジェクトを使用したサンプルを示す。

// selectが変更されたときに呼び出される関数
function selectChanged() {
  document.getElementById("selectedIndex").innerHTML = document.getElementById("select1").selectedIndex;
}

// selectオブジェクト
var s = document.getElementById("select1");

// selectのプロパティを表示
document.getElementById("disabled").innerHTML = s.disabled;
document.getElementById("length").innerHTML = s.length;
document.getElementById("multiple").innerHTML = s.multiple;
document.getElementById("name").innerHTML = s.name;
document.getElementById("selectedIndex").innerHTML = s.selectedIndex;
document.getElementById("size").innerHTML = s.size;
document.getElementById("type").innerHTML = s.type;

// selectが変更されたときに関数を呼び出す
document.getElementById("select1").addEventListener("change", selectChanged);

上記のJavaScriptの実行結果は次のとおり。

プロパティ
disabled
length
multiple
name
selectedIndex
size
type
このエントリーをはてなブックマークに追加