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>
<!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>
<!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を設定します。セレクトボックスに指定インデックスの項目値が表示されます。