亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS檢索下拉列表框中被選項(xiàng)目的索引號(hào)(selectedIndex)

 更新時(shí)間:2019年12月17日 09:25:06   作者:王佳斌  
這篇文章主要介紹了JS檢索下拉列表框中被選項(xiàng)目的索引號(hào)(selectedIndex),本文通過(guò)實(shí)例代碼圖文詳解的形式給大家介紹的非常詳細(xì),需要的朋友可以參考下

前言

在開(kāi)始本文主題之前,先來(lái)看一個(gè) HTML demo,一個(gè)非常簡(jiǎn)單的選擇列表(select):

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

在這里插入圖片描述

請(qǐng)思考一個(gè)問(wèn)題,如果 這些數(shù)據(jù)(one/two/three)是從后臺(tái)請(qǐng)求過(guò)來(lái)且動(dòng)態(tài)添加渲染進(jìn)DOM系統(tǒng) 的話,你是無(wú)法確定每個(gè)列表項(xiàng)的索引號(hào)的,也就意味著這些列表項(xiàng)沒(méi)有 ID。顯然,我們需要獲取到用戶選擇的列表項(xiàng)與當(dāng)前列表項(xiàng)的索引號(hào)(ID)。

selectedIndex API

JavaScript 提供了找到select ID索引號(hào)的方法,它反映了第一個(gè)或最后選擇的索引 <option> 元件,這取決于值 multiple,注意,該值為 -1 指示未選擇任何元素。

selectedIndex 屬性可設(shè)置或返回下拉列表中被選選項(xiàng)的索引號(hào),若允許多重選擇,則僅會(huì)返回第一個(gè)被選選項(xiàng)的索引號(hào)。

語(yǔ)法:

// 獲取索引號(hào)
selectElem.selectedIndex
// 重置索引號(hào)(newIndex為新值)
selectElem.selectedIndex = newIndex

獲取索引 / 重置索引

我們可以使用 JavaScript 提供的 API 來(lái)獲取當(dāng)前用戶選擇列表項(xiàng)的索引號(hào)。當(dāng)然,我們也可以重置(改變)索引號(hào)。

HTML:

<select id="select">
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>
<button onclick="get()">獲取索引號(hào)</button>
<button onclick="reset()">重置索引號(hào)</button>

JavaScript:

// 獲取列表項(xiàng)(select)
var select = document.getElementById('select')
// 獲取索引號(hào)
function get(){
  console.log(`當(dāng)前索引號(hào):${select.selectedIndex}`)
}
// 重置索引號(hào)
function reset(){
  let flag = select.selectedIndex //頻繁使用封裝一下(*^_^*)
  if(flag == '0'){ // 重置索引值為0的列表項(xiàng)
    flag = 999 //更改值為999
    console.log(`重置后索引號(hào):${flag}`)
    console.log(`注意:重置不會(huì)改變?cè)?,不信你看現(xiàn)在的值:${select.selectedIndex}`)
  }
}

在這里插入圖片描述

總結(jié)

以上所述是小編給大家介紹的JS檢索下拉列表框中被選項(xiàng)目的索引號(hào)(selectedIndex),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

最新評(píng)論