快捷導(dǎo)航

javascript下拉框選項(xiàng)單擊事件的例子分享

更新時(shí)間：2015年03月04日 10:03:28 投稿：hebedich

這篇文章主要分享了一些javascript下拉框選項(xiàng)單擊事件的例子，以及在例子中遇到的問題的解決方法，十分實(shí)用，推薦給小伙伴們參考下。

我本人是從事前端開發(fā)的技術(shù)人員，下拉框是我們應(yīng)用的比較多的頁(yè)面元素，今天我結(jié)合實(shí)際工作中遇到的問題說一下關(guān)于下拉框注冊(cè)事件的一些例子，希望對(duì)大家有所幫助。

復(fù)制代碼代碼如下:

　　<select name="" id="sel">

　　　　<option value="111">1</option>

　　　　<option value="222">2</option>

　　　　<option value="333">3</option>

　　</select>

以上是一段非常簡(jiǎn)單的單選下拉框代碼，如果我們要通過單擊下拉選項(xiàng)獲取對(duì)應(yīng)的value,大致的代碼如下:

復(fù)制代碼代碼如下:

　　var sel=document.getElementById("sel");

　　var option=sel.options;

　　for(var i=0;i<option.length;i++){

　　　　option[i].onclick=function(){

　　　　　　alert(this.text);//獲取下拉選項(xiàng)的文本值

　　　　　　alert(this.value);//獲取下拉選項(xiàng)的value值

　　　　}

　　}

　以上代碼在ie9以下以及chrome上不能產(chǎn)生預(yù)期效果，在Firefox上有效。針對(duì)這種情況，不建議在option選項(xiàng)上綁定click事件,建議利用change事件來代替,因?yàn)閏hange是通用的，從本質(zhì)上看來就是change。

復(fù)制代碼代碼如下:

　　var sel=document.getElementById("sel");

　　sel.onchange=function(){

　　　　alert(sel.options[sel.selectedIndex].value);

　　}

以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

微信小程序點(diǎn)擊切換樣式scroll-view實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了微信小程序點(diǎn)擊切換樣式scroll-view實(shí)現(xiàn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
重新理解JavaScript的六種繼承方式
通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
微信小程序向Java后臺(tái)傳輸參數(shù)的方法實(shí)現(xiàn)
這篇文章主要介紹了微信小程序向Java后臺(tái)傳輸參數(shù)的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
JavaScript設(shè)計(jì)模式初探
javascript設(shè)計(jì)模式在程序中經(jīng)常遇到，不同的設(shè)計(jì)模式都有各自的優(yōu)劣勢(shì)，本文給大家整理了七種設(shè)計(jì)模式，對(duì)js設(shè)計(jì)模式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
微信小程序wx.navigateTo中events屬性實(shí)現(xiàn)頁(yè)面間通信傳值，數(shù)據(jù)同步
這篇文章主要介紹了微信小程序wx.navigateTo中events屬性實(shí)現(xiàn)頁(yè)面間通信傳值，數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JavaScript中發(fā)布/訂閱模式的簡(jiǎn)單實(shí)例
這篇文章主要介紹了JavaScript中發(fā)布/訂閱模式的簡(jiǎn)單實(shí)例,本文給出了一個(gè)簡(jiǎn)單易懂的實(shí)現(xiàn)代碼,比較容易理解,需要的朋友可以參考下
2014-11-11
細(xì)數(shù)promise與async/await的使用及區(qū)別說明
這篇文章主要介紹了細(xì)數(shù)promise與async/await的使用及區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
javascript實(shí)現(xiàn)搜索篩選功能實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)搜索篩選功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條
flash導(dǎo)航條在網(wǎng)站建設(shè)中應(yīng)用比較廣泛，此種效果給瀏覽者帶來極好的視覺效果，非常棒，下面小編給大家介紹基于JS實(shí)現(xiàn)導(dǎo)航條flash導(dǎo)航條，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
javascript中對(duì)變量類型的判斷方法
在JavaScript中，有5種基本數(shù)據(jù)類型和1種復(fù)雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復(fù)雜數(shù)據(jù)類型是Object，Object中還細(xì)分了很多具體的類型，比如：Array, Function, Date等等
2015-08-08