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>`が選択状態になります。
コメント
コメントを投稿