JavaScript セレクトボックスに選択された要素を指定するサンプル
環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit
書式
1.ボタンのイベントの登録
document.querySelectorAll(“input[type=button]")[0].addEventListener(“click", function() {
処理コード
2.セレクトボックスの取得
document.getElementById(“セレクトボックスのID名");
3.Window: load イベントの登録
window.addEventListener(“load", function(){処理コード
使用例
<!DOCTYPE html> <html> <body> <select id="city"> <option selected="selected">都道府県</option> <option>東京</option> <option>大阪</option> <option>福岡</option> </select> <div id = "res"></div> <input type= "button" class= "btn" value= "選択"> <script> window.addEventListener("load", function(){ document.querySelectorAll("input[type=button]")[0].addEventListener("click", function() { let cft = document.getElementById("city"); document.getElementById("res").innerHTML = cft.value; }); }); </script> </body> </html>
実行結果
セレクトボックスの「東京」を選択し「選択」ボタンを押すと、
divタグ「res」に「東京」が表示されます。