JavaScript getElementByIdメソッドでセレクトボックスの選択した値を取得するサンプル

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
1.セレクトボックスの選択した値を取得します
const 変数名= document.getElementById(セレクトボックスid名).value;
2.指定タグ要素に値を設定します
document.getElementById(指定タグ要素名).textContent =値

使用例

<!DOCTYPE html>
<html>
<body>

<p>選択都市名: <span id="show"></span></p>
      <select id="city">
          <option value="tokyo">東京</option>
          <option value="oosaka">大阪</option>
          <option value="fukuoka">福岡</option>
      </select>
</form>

<p><input type="button" value="表示"/></p>

<script>
function funA(){
    // セレクトボックス「city」の取得
    const result = document.getElementById("city").value;
    
    document.getElementById("show").textContent = result;

}
</script>

</body>
</html>

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

JavaScript

Posted by arkgame