javascript_select内の特定のoptionを選択状態にするコード

 

html内に optionが10個あるようなselectボックスがあり、

javascriptでそのうちの 8番目のoptionを選択状態にするような


コードを作成していただけないでしょうか?





以下は、JavaScriptを使用して

HTMLの`<select>`ボックス内の8番目の`<option>`を選択状態にするコードです。



### HTML構造例


```html


<select id="mySelect">

  <option value="1">Option 1</option>

  <option value="2">Option 2</option>

  <option value="3">Option 3</option>

  <option value="4">Option 4</option>

  <option value="5">Option 5</option>

  <option value="6">Option 6</option>

  <option value="7">Option 7</option>

  <option value="8">Option 8</option>

  <option value="9">Option 9</option>

  <option value="10">Option 10</option>

</select>



```


### JavaScriptコード


```javascript


// 対象の<select>要素を取得

const selectBox = document.getElementById('mySelect');



// 8番目の<option>を選択状態にする (インデックスは0から始まるため7を指定)

selectBox.selectedIndex = 7;



// 確認: 現在選択されている<option>の値またはテキストを出力


 // Optionのvalue属性が出力される

console.log(selectBox.value);


 // テキストを出力

console.log(selectBox.options[selectBox.selectedIndex].text);


```



### 解説


1. **`document.getElementById('mySelect')`**  

   `<select>`要素を取得します。

   

   

2. **`selectedIndex`プロパティ**  


   選択する`<option>`のインデックスを設定します

(0から始まるので8番目の`<option>`はインデックス7)。

   

   

3. **確認コード**  

   選択された値またはテキストをログに出力しています。



このコードを実行すると、8番目の`<option>`が選択状態になります。


コメント