HTML Select selectedIndex實(shí)例講解

HTML Select元素的selectedIndex屬性用于設(shè)置或獲取被選中選項(xiàng)的索引。選項(xiàng)的索引從0開始，表示第一個(gè)選項(xiàng)，依次遞增。

以下是一個(gè)使用selectedIndex屬性的示例：

<select id="mySelect">
  <option value="apple">蘋果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

<button onclick="getSelectedIndex()">獲取選中索引</button>

<script>
function getSelectedIndex() {
  var selectElement = document.getElementById("mySelect");
  var selectedIndex = selectElement.selectedIndex;
  
  alert("選中索引為：" + selectedIndex);
}
</script>

在上面的示例中，我們定義了一個(gè)包含三個(gè)選項(xiàng)的選擇框，并給每個(gè)選項(xiàng)指定了一個(gè)值。然后，我們定義了一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)，調(diào)用了getSelectedIndex()函數(shù)。

在getSelectedIndex()函數(shù)中，我們先獲取了id為"mySelect"的選擇框元素，并將其賦值給selectElement變量。然后，我們使用selectedIndex屬性獲取了選中選項(xiàng)的索引，并將其賦值給selectedIndex變量。

最后，我們使用alert()函數(shù)彈出一個(gè)對話框，顯示選中索引的值。

當(dāng)我們點(diǎn)擊按鈕時(shí)，彈出的對話框?qū)@示當(dāng)前選中選項(xiàng)的索引。假設(shè)我們選擇了"香蕉"選項(xiàng)，那么彈出的對話框?qū)@示"選中索引為：1"。