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

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122(Official Build) (64 ビット)

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<body>
<select id="city">
<option value="tokyo">東京</option>
<option value="oosaka">大阪</option>
<option value="fukuoka">福岡</option>
</select><br><br>
<button onclick="funA()">選択</button>
<script>
function funA() {
//getElementByIdメソッドで値を設定する
document.getElementById("city").selectedIndex =2;
}
</script>
</body>
</html>
<!DOCTYPE html> <html> <body> <select id="city"> <option value="tokyo">東京</option> <option value="oosaka">大阪</option> <option value="fukuoka">福岡</option> </select><br><br> <button onclick="funA()">選択</button> <script> function funA() { //getElementByIdメソッドで値を設定する document.getElementById("city").selectedIndex =2; } </script> </body> </html>
<!DOCTYPE html>
<html>
<body>
<select id="city">
    <option value="tokyo">東京</option>
    <option value="oosaka">大阪</option>
    <option value="fukuoka">福岡</option>
</select><br><br>

<button onclick="funA()">選択</button>
<script>
function funA() {
//getElementByIdメソッドで値を設定する
 document.getElementById("city").selectedIndex =2;
}
</script>

</body>
</html>

実行結果
「選択」ボタンを押すと、項目「福岡」が選択されます。

JavaScript

Posted by arkgame