JavaScript onchange関数でセレクトボックス(select)の選択項目の値を取得するサンプル
環境
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」が表示されます。