JavaScript onchange関数でセレクトボックス(select)の選択項目の値を取得するサンプル

2022年11月24日

環境
Google Chrome　107.0.5304.107
Windows 10 Home 64bit

書式
1.ID名を指定してセレクトボックス要素を取得します。
var 変数名 = document.getElementById(“セレクトボックスのID名");
2.セレクトボックスの選択された項目のインデックスを指定します。
変数名.selectedIndex
3.選択された項目の値を設定します。
変数名.options[変数名.selectedIndex].value;
4.onchange関数の定義
<select name="name属性名" id="id属性名" onchange="関数名()">

使用例

<!DOCTYPE html>
<html>
<body>

<script>
 function show(){
  //セレクターID名「city」オブジェクトを取得する
    var selB = document.getElementById("city");
    //　セレクトボックスの選択インデックスの項目を選択
    var selBval = selB.options[selB.selectedIndex].value;
    alert("選択された値: " + selBval);
}
</script>

<select name="city" id="city" onchange="show()">
  <option value="">都市を選択してください</option>
  <option value='tokyo'>東京</option>
  <option value='oosaka'>大阪</option>
  <option value='fukuoka'>福岡</option>
</select>
</body>
</html>

結果
「大阪」を選択すると、「選択された値:oosaka」が表示されます。

JavaScript

Posted by arkgame

関連記事: