やりたいこと
プルダウンからスポーツ名を選択して、選択完了ボタンを押下すると、選択したスポーツ名が表示させるようにしたいと思います。
以下が、参考にしたページのURLになります。
https://itsakura.com/js-selectbox
実際の画面
1.こちらのプルダウンから選択します。
2.プルダウンメニューから、今回は「サッカー」を選択して、「選択完了」ボタンを押下。
3.選択した「サッカー」が画面に表示。
ソースコード
こちらが、今回のソースコードになります。
index.html
<!DOCTYPE html>
<html lang="js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>練習</title>
</head>
<body>
<select class="form-select" required aria-label="select example" id="selectSport" style="width: 30%;">
<option value="">テニス</option>
<option value="">野球</option>
<option value="">サッカー</option>
<option value="">バスケ</option>
</select>
<button id="btn">選択完了</button>
<p id="setSport"></p>
</body>
<script src="index.js"></script>
</html>
index.js
// 「選択完了」ボタンと選択した値を表示するidを取得
const btn = document.getElementById('btn');
const setSport = document.getElementById("setSport");
const selectSport = document.getElementById("selectSport");
// メニューから値を選択して、ボタンを押した後の処理
btn.addEventListener('click', () => {
const num = selectSport.selectedIndex;
// 選択した要素のテキストを取得する処理
const getSportName = selectSport.options[num].innerText;
// 取得した要素をHTMLに埋め込む
setSport.innerText = getSportName;
});
プルダウンからのデータ取得は結構使えるので、ぜひ参考にしてください。