JavaScript Selectオブジェクト

JavaScriptのselectオブジェクトは、HTMLのselect要素を表わす。Elementオブジェクトのプロパティ、メソッド及びイベントもサポートする。

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

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

selectオブジェクトの使用例

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

<select id="editions" name="editions">
  <option>Hardcover</option>
  <option>Paperback</option>
  <option>Mass Market Paperback</option>
</select>
<script>
  function setInnerHTML(id, val) {
    document.getElementById(id).innerHTML = val
  }
  // selectが変更されたときに呼び出される関数
  function selectChanged() {
    let s = document.getElementById("editions");
    setInnerHTML("selectedIndex", s.selectedIndex)
    setInnerHTML("value", s.value)
  }

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

  // selectのプロパティを表示
  setInnerHTML("disabled", s.disabled)
  setInnerHTML("length", s.length)
  setInnerHTML("multiple", s.multiple)
  setInnerHTML("name", s.name)
  setInnerHTML("size", s.size)
  setInnerHTML("type", s.type)

  selectChanged()

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

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