JavaScript getElementByIdメソッドでセレクトボックスの値を設定するサンプル
環境
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を設定します。セレクトボックスに指定インデックスの項目値が表示されます。