JavaScript セレクトボックスに選択された要素を指定するサンプル

2023年2月13日

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

JavaScript

Posted by arkgame

関連記事: