JavaScript getElementByIdメソッドを使用してセレクトボックスの値を取得する

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build） （64 ビット）

構文
1.セレクトボックスの値を選択します
const 変数名 = document.getElementById(セレクトボックスのid名).value;
2.セレクトボックスの選択した値を表示します。
document.getElementById(セレクター名).textContent = 変数名;

使用例

<!DOCTYPE html>
<html>
<body>
<p>選択した都市名: <span id="res"></span></p>
<select id="city">
    <option value="tokyo">東京</option>
    <option value="oosaka">大阪</option>
    <option value="fukuoka">福岡</option>
</select><br><br>

<button>選択</button>
<script>
function funA() {
    const str = document.getElementById("city").value;
    document.getElementById("res").textContent = str;
}
</script>

</body>
</html>

実行結果

「大阪」を選択して「選択」ボタンを押すと、「選択した都市名: oosaka」が表示されます。

 

JavaScript

Posted by arkgame