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」に「東京」が表示されます。