HTML5 - SELECT要素

概要

select要素はリストボックス、コンボボックスなどと呼ばれる複数アイテムからの選択要素。 リスト項目のうちユーザーが選択した項目に対応する値を、コードの中で利用する。

JavaScript用

以下はselect要素のデモで、リストの選択項目を変更するたびにその下のp要素の背景色が選択した色に変更される。

SELECT要素のテスト

上の要素のHTMLは以下の通り。

• select要素の子要素にリスト項目をoption要素で並べる
• option要素のvalue属性はスクリプトで文字列として利用される

<select id="select_js">
  <option value="black">黒色</option>
  <option value="red">赤色<</option>
  <option value="green">緑色</option>
  <option value="blue">青色</option>
  <option value="#888">灰色</option>
</select>
<p id="field_js" style="color: #fff; background-color: black;">SELECT要素のテスト</p>
    

select要素に応じた処理をするJavaScriptのコードは以下の通り。select要素のDOMを取得し、 選択内容が変化を捕捉するリスナーを登録している。

選択された項目に対応した処理を、ボタンなどの他のイベントの中で利用する方法もあるが、 ここではonchangeメソッドでselectの選択項目が変化したときのイベントを 捕捉している。

window.onload = () => {
  select_js = document.getElementById('select_js')
  select_js.onchange = () => {
    document.getElementById('field_js').style.background = select_js.value;
  }
}
    

JQuery用

以下のコードも上と動作は同じで、JQueryで実装している。

SELECT要素のテスト

HTMLについてはidをJQueryから参照するために変更しているだけで、構造は変わらない。JQueryの内容は以下の通り。

$(() => {
  $('#select_jquery').on('change', () => {
    $('#field_jquery').css('background-color', $('#select_jquery').val());
  });
});