JavaScript getElementByIdメソッドでセレクトボックスの値を設定するサンプル

2022年10月31日

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
セレクトボックスの選択する項目のインデックス値を設定します
document.getElementById(セレクトボックスのid名).selectedIndex = 数値;
getElementByIdメソッドを使って、セレクトボックスの値を設定します。

使用例

<!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="表示" onclick="funA()"/></p>
<script>
function funA(){
       // セレクトボックス「city」の値を設定 インデックス値2指定
    document.getElementById("city").selectedIndex = 2;
    
    //要素「show」の値を設定
     document.getElementById("show").textContent = "123";
}
</script>

</body>
</html>

実行結果
「表示」ボタンを押すと、セレクトボックスのselectedIndexに選択するインデックス値2を設定します。セレクトボックスに指定インデックスの項目値が表示されます。

JavaScript

Posted by arkgame

関連記事: