ドロップダウンリストの選択項目番号
セレクトボックスには、現在選択されているリスト項目の番号を格納する特別なプロパティ
selectedIndexが存在します。
番号のカウントは0から始まります。このプロパティは読み取りだけでなく書き込みも可能で、選択されているリスト項目を変更できます。
具体例を使ってこのプロパティの操作を見てみましょう。 以下のようなドロップダウンリストがあるとします:
<select id="select">
<option value="one">一</option>
<option value="two" selected>二</option>
<option value="three">三</option>
</select>
選択されているリスト項目の番号を出力してみましょう:
let select = document.querySelector('#select');
console.log(select.selectedIndex); // 1を出力
次に、別の項目を選択してみます:
let select = document.querySelector('#select');
select.selectedIndex = 2; // '三'を選択
入力フィールドとセレクトボックスがあります。入力フィールドに何らかの数値を入力します。 フォーカスが外れたときに、入力された値と等しい番号のリスト項目を選択状態にしてください。
曜日の名前を含むドロップダウンリストを作成してください。 JavaScriptを使用して、デフォルトでこのリストに現在の曜日が選択されるようにしてください。