## やりたいこと
プルダウンからスポーツ名を選択して、選択完了ボタンを押下すると、選択したスポーツ名が表示させるようにしたいと思います。
以下が、参考にしたページのURLになります。
https://itsakura.com/js-selectbox

## 実際の画面
1.こちらのプルダウンから選択します。
![スクリーンショット 2023-03-01 20.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f1418ba1-8223-c154-2897-5761b08d66e8.png)

2.プルダウンメニューから、今回は「サッカー」を選択して、「選択完了」ボタンを押下。
![スクリーンショット 2023-03-01 20.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/fac7d00f-58f3-c3fe-76ec-e4d42a744ccd.png)

3.選択した「サッカー」が画面に表示。

![スクリーンショット 2023-03-01 20.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f29c50b1-76c6-bc39-fe28-2da0dc984b9b.png)

## ソースコード
こちらが、今回のソースコードになります。
![img](/mosaic-code.jpg)

![img](/mosaic-code.jpg)
プルダウンからのデータ取得は結構使えるので、ぜひ参考にしてください。

[cv:issue_marketplace_engineer]

## やりたいこと
プルダウンからスポーツ名を選択して、選択完了ボタンを押下すると、選択したスポーツ名が表示させるようにしたいと思います。
以下が、参考にしたページのURLになります。
https://itsakura.com/js-selectbox

## 実際の画面
1.こちらのプルダウンから選択します。
![スクリーンショット 2023-03-01 20.28.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f1418ba1-8223-c154-2897-5761b08d66e8.png)

2.プルダウンメニューから、今回は「サッカー」を選択して、「選択完了」ボタンを押下。
![スクリーンショット 2023-03-01 20.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/fac7d00f-58f3-c3fe-76ec-e4d42a744ccd.png)

3.選択した「サッカー」が画面に表示。

![スクリーンショット 2023-03-01 20.28.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/f29c50b1-76c6-bc39-fe28-2da0dc984b9b.png)

## ソースコード
こちらが、今回のソースコードになります。
```: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;
});
```
プルダウンからのデータ取得は結構使えるので、ぜひ参考にしてください。

[![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

やりたいこと

実際の画面

続きを読むには単価診断を受けてください（30秒）