HTML の selectedIndex プロパティの使用方法

2年 ago
優斗, 朝陽
1 minute

selectedIndexプロパティは、ドロップダウンリストで選択されたオプションのインデックス番号を設定または取得するために使用されます。

selectedIndexプロパティに値を設定するには、次の 2 つの方法のいずれかを使用できます。

  1. JavaScriptコード経由で設定する：
document.getElementById("mySelect").selectedIndex = 2;

上記のコードは、ドロップダウンリストの2番目の索引のオプションが選択されるように設定します。

  1. HTMLのコードを使用して設定する。
<select id="mySelect" selectedIndex="2">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>

上記のHTMLコードではselectedIndex属性が2に設定されており、3番目の選択肢が初期状態で選択されていることを示しています。

selectedIndexプロパティの値を取得するには、以下のいずれかの方法を使用します。

  1. JavaScriptのコードで取得する：
var selectedIndex = document.getElementById("mySelect").selectedIndex;

上記のコードは、selectedIndex属性の値をselectedIndex変数に代入します。

  1. HTMLコードでselectedIndexプロパティで取得
<select id="mySelect" selectedIndex="2">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
<p>The selected index is: <span id="selectedIdx"></span></p>
<script>
var selectedIdx = document.getElementById("mySelect").selectedIndex;
document.getElementById("selectedIdx").innerHTML = selectedIdx;
</script>

上記のHTMLコードでは、JavaScriptのコードによってselectedIndexの値が「selectedIdx」IDの要素に代入され、selectedIndexの値が表示されています。

bannerAds