基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
本文實(shí)例講述了基于jQuery的select下拉框選擇觸發(fā)事件實(shí)現(xiàn)方法。分享給大家供大家參考,具體如下:
我一直以來都認(rèn)為,select 下拉框選擇對(duì)選項(xiàng) options 使用 onclick 注冊(cè)事件即可,如下:
<select> <option value="0" onclick="func(0)">選項(xiàng)一</option> <option value="1" onclick="func(1)">選項(xiàng)二</option> </select>
今天有個(gè)要求需要做聯(lián)動(dòng)菜單,就是每點(diǎn)一次,相鄰的下拉框會(huì)自動(dòng)改變 ,我一想沒問題啊,onclick走起
于是走上面的路線,客戶還說了,IE8必須支持,我想想也是,XP的IE內(nèi)核只能升到IE8,現(xiàn)在很多用戶依然舍不得XP,但是它支持onclick啊,我在ff下試過了,一點(diǎn)問題沒有,但是一切換IE8下,告訴你,一點(diǎn)反應(yīng)沒有。
然后多方查找資料,原來select 它的事件是注冊(cè)在自己標(biāo)簽上的,不是onclick,而是onchange,子標(biāo)簽對(duì)低版本瀏覽器無效,而且也不是正規(guī)標(biāo)準(zhǔn)的寫法。
<select onchange="func()> <option value="0" >選項(xiàng)一</option> <option value="1" >選項(xiàng)二</option> </select>
好,問題又來了,我傳的參數(shù)怎么辦?怎么接收參數(shù)
這不是問題,jQuery給你答案
function func(){ //獲取被選中的option標(biāo)簽 var vs = $('select option:selected').val(); }
當(dāng)然這里的 select 最好加個(gè)id 以便混淆,ok,問題解決,漲姿勢了木有呢,哈哈。。。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery表單(form)操作技巧總結(jié)》、《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery操作select下拉框的text值和value值的方法
- jquery multiSelect 多選下拉框
- jquery及原生js獲取select下拉框選中的值示例
- jquery獲得下拉框值的代碼
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- jquery實(shí)現(xiàn)戶籍地選擇下拉框
相關(guān)文章
jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶3D切割效果的輪播圖功能,結(jié)合實(shí)例形式分析了jQuery輪播圖相關(guān)的界面布局、3D效果實(shí)現(xiàn)與事件響應(yīng)等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-04-04用Jquery.load載入頁面實(shí)現(xiàn)局部刷新
用jquery.load的方法載入新的頁面,以實(shí)現(xiàn)局部刷新,可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨(dú)的頁面不一樣,樣式?jīng)]了,關(guān)于這個(gè)問題,下面有個(gè)不錯(cuò)的解決方法2014-01-01jquery實(shí)時(shí)獲取時(shí)間的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query實(shí)時(shí)獲取時(shí)間的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10各瀏覽器中querySelector和querySelectorAll的實(shí)現(xiàn)差異分析
querySelector和querySelectorAll的參數(shù)須是符合 css selector 的字符串。不同的是querySelector返回的是一個(gè)對(duì)象,querySelectorAll返回的一個(gè)集合(NodeList)2012-05-05內(nèi)容滑動(dòng)切換效果jquery.hwSlide.js插件封裝
這篇文章主要為大家詳細(xì)介紹了jQuery開發(fā)之內(nèi)容滑動(dòng)切換效果的相關(guān)資料,jquery.hwSlide.js插件進(jìn)行封裝具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作示例
這篇文章主要介紹了JQuery使用屬性addClass、removeClass和toggleClass實(shí)現(xiàn)增加和刪除類操作,涉及jquery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11基于jQuery的JavaScript模版引擎JsRender使用指南
這篇文章主要介紹了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以參考下2014-12-12jquery實(shí)現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單合攏與展開網(wǎng)頁面板的方法,通過簡單的jquery頁面元素樣式操作實(shí)現(xiàn)展開與合攏面板的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-09