JS檢索下拉列表框中被選項(xiàng)目的索引號(hào)(selectedIndex)
前言
在開(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)文章
純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能
這篇文章主要介紹了純js實(shí)現(xiàn)重發(fā)驗(yàn)證碼按鈕倒數(shù)功能,本文整理了兩個(gè)實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04ECMAScript6變量的解構(gòu)賦值實(shí)例詳解
ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring),下文中給大家提供了嵌套數(shù)組的解構(gòu)例子,大家一起看看吧2017-09-09JavaScript實(shí)現(xiàn)存儲(chǔ)HTML字符串示例
這篇文章主要介紹了JavaScript存儲(chǔ)HTML字符串的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04JavaScript 動(dòng)態(tài)加載腳本和樣式的方法
這篇文章主要介紹了JavaScript 動(dòng)態(tài)加載腳本和樣式的方法,需要的朋友可以參考下2015-04-04