溫馨提示×

HTML Select selectedIndex實例講解

小億
182
2023-12-19 02:07:56
欄目: 編程語言

HTML Select元素的selectedIndex屬性用于設置或獲取被選中選項的索引。選項的索引從0開始,表示第一個選項,依次遞增。

以下是一個使用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>

在上面的示例中,我們定義了一個包含三個選項的選擇框,并給每個選項指定了一個值。然后,我們定義了一個按鈕,當點擊按鈕時,調用了getSelectedIndex()函數。

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

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

當我們點擊按鈕時,彈出的對話框將顯示當前選中選項的索引。假設我們選擇了"香蕉"選項,那么彈出的對話框將顯示"選中索引為:1"。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女