javascript下拉框選項單擊事件的例子分享
更新時間：2015年03月04日 10:03:28 投稿：hebedich
這篇文章主要分享了一些javascript下拉框選項單擊事件的例子，以及在例子中遇到的問題的解決方法，十分實用，推薦給小伙伴們參考下。
我本人是從事前端開發(fā)的技術(shù)人員，下拉框是我們應(yīng)用的比較多的頁面元素，今天我結(jié)合實際工作中遇到的問題說一下關(guān)于下拉框注冊事件的一些例子，希望對大家有所幫助。
復制代碼 代碼如下:
<select name="" id="sel">
<option value="111">1</option>
<option value="222">2</option>
<option value="333">3</option>
</select>
以上是一段非常簡單的單選下拉框代碼，如果我們要通過單擊下拉選項獲取對應(yīng)的value,大致的代碼如下:
復制代碼 代碼如下:
var sel=document.getElementById("sel");
var option=sel.options;
for(var i=0;i<option.length;i++){
option[i].onclick=function(){
alert(this.text);//獲取下拉選項的文本值
alert(this.value);//獲取下拉選項的value值
}
}
以上代碼在ie9以下以及chrome上不能產(chǎn)生預(yù)期效果，在Firefox上有效。針對這種情況，不建議在option選項上綁定click事件,建議利用change事件來代替,因為change是通用的，從本質(zhì)上看來就是change。
復制代碼 代碼如下:
var sel=document.getElementById("sel");
sel.onchange=function(){
alert(sel.options[sel.selectedIndex].value);
}
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
- angularJs-$http實現(xiàn)百度搜索時的動態(tài)下拉框示例
- js實現(xiàn)帶搜索功能的下拉框?qū)崟r搜索實時匹配
- jquery及原生js獲取select下拉框選中的值示例
- Vue.js 2.0中select級聯(lián)下拉框?qū)嵗?/a>
- javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單
- JS實現(xiàn)下拉框的動態(tài)添加(附效果)
- Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
- 省市區(qū)三級聯(lián)動下拉框菜單javascript版
- js實現(xiàn)select下拉框選擇
- js實現(xiàn)帶搜索功能的下拉框
相關(guān)文章
微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例
這篇文章主要介紹了微信小程序 點擊切換樣式scroll-view實現(xiàn)代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
通過本文帶領(lǐng)大家一起重新理解JavaScript的六種繼承方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
微信小程序向Java后臺傳輸參數(shù)的方法實現(xiàn)
這篇文章主要介紹了微信小程序向Java后臺傳輸參數(shù)的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
javascript設(shè)計模式在程序中經(jīng)常遇到，不同的設(shè)計模式都有各自的優(yōu)劣勢，本文給大家整理了七種設(shè)計模式，對js設(shè)計模式相關(guān)知識感興趣的朋友一起學習吧2016-01-01
微信小程序wx.navigateTo中events屬性實現(xiàn)頁面間通信傳值，數(shù)據(jù)同步
這篇文章主要介紹了微信小程序wx.navigateTo中events屬性實現(xiàn)頁面間通信傳值，數(shù)據(jù)同步,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JavaScript中發(fā)布/訂閱模式的簡單實例,本文給出了一個簡單易懂的實現(xiàn)代碼,比較容易理解,需要的朋友可以參考下2014-11-11
細數(shù)promise與async/await的使用及區(qū)別說明
這篇文章主要介紹了細數(shù)promise與async/await的使用及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要給大家介紹了關(guān)于javascript實現(xiàn)搜索篩選功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
flash導航條在網(wǎng)站建設(shè)中應(yīng)用比較廣泛，此種效果給瀏覽者帶來極好的視覺效果，非常棒，下面小編給大家介紹基于JS實現(xiàn)導航條flash導航條，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
在JavaScript中，有5種基本數(shù)據(jù)類型和1種復雜數(shù)據(jù)類型，基本數(shù)據(jù)類型有：Undefined, Null, Boolean, Number和String；復雜數(shù)據(jù)類型是Object，Object中還細分了很多具體的類型，比如：Array, Function, Date等等2015-08-08