jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼
說(shuō)明:
最近剛接了一個(gè)項(xiàng)目,其中有項(xiàng)目需求要求根據(jù)選擇不同店鋪選項(xiàng),上送不同id值,展示不同商品列表
先給大家展示下實(shí)現(xiàn)效果圖:如果大家感興趣對(duì)此很感興趣,可以參考下實(shí)現(xiàn)代碼。
var formStr = "{'supplierId':'供應(yīng)鏈企業(yè)|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post", dataType : "json", cache : false, url : "../../../webservice/gmall.json", // 提交到一般處理程序請(qǐng)求數(shù)據(jù) data :"businessCode=61001001&message="+encodeURI(formStr).replace(/\+/g, "%2B"), async : false, error : function() { //alert("connection error!!!"); layer.alert("數(shù)據(jù)加載失敗,請(qǐng)及時(shí)聯(lián)系管理員!",0); }, success : function(data) { var dataJson = strToJson(data.msg); var shopname = dataJson.body.gmPage; if(dataJson.head.status=='000000'){ $.each(shopname,function(i,item){ $("#store").append("<option id='"+item.id+"' value='"+item.shopType+"' title='"+item.name+"'>"+item.name+"</option>"); }) $("select").on('click',function (){ var opt = $(this).children('option:selected'); var shopId = $(opt).attr('id'); var shopType = $(opt).val(); var formStrshop = " {'shopId':"+shopId+",'shopType':"+shopType+"}"; if($("option").val()==''){ $("#tb").empty(); } $.ajax({ type : "post", dataType : "json", cache : false, url : "../../../webservice/gmall.json", // 提交到一般處理程序請(qǐng)求數(shù)據(jù) data :"businessCode=61001003&message="+encodeURI(formStrshop).replace(/\+/g, "%2B"), async : false, error : function() { layer.alert("數(shù)據(jù)加載失敗,請(qǐng)及時(shí)聯(lián)系管理員!",0); }, success : function(data) { var dataJson = strToJson(data.msg); var shopname = dataJson.body.gmPage; if(dataJson.head.status=='000000'){ $.each(shopname,function(i,item){ var attributeValue11 = dataJson.body.gmPage[i].attributeValue11; $("#tb").empty(); $("#tb").append("<tr id='"+item.id+"'>" +"<td><input type='checkbox' value='"+item.id+"' name='price'/></td>" +"<td>"+item.sn+"</td>" +"<td>"+item.name+"</td>" +"<td>"+item.attributeValue11+"</td>" +"<td><input type='text' name='discount' class='text' style='width:100px'/></td>" +"<td>"+0+"</td></tr>" ); }) } } }); }) } } });
簡(jiǎn)單示例
<select name="" id=""> <option value="1" id="1">123</option> <option value="2" id="2">gfg</option> <option value="3" id="3">ds3</option> <option value="4" id="4">1fgtr3</option> <option value="5" id="5">6y3</option> <option value="6" id="6">1fbnh3</option> <option value="7" id="7">1vdf3</option> </select> <script src="jquery-1.8.2.min.js"></script> <script> $(function(){ $('select').on('click',function(){ // $(this).on('click',function(){ 此步可省略,無(wú)需管option的點(diǎn)擊事件 var $opt = $(this).children('option:selected'); console.log($($opt).attr('id'),$($opt).val(),$($opt).html()); // }) }) }) </script>
以上所述是小編給大家介紹的jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼的相關(guān)知識(shí),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jquery無(wú)法為動(dòng)態(tài)生成的元素添加點(diǎn)擊事件的解決方法(推薦)
- jquery 觸發(fā)a鏈接點(diǎn)擊事件解決方案
- jQuery實(shí)現(xiàn)當(dāng)按下回車(chē)鍵時(shí)綁定點(diǎn)擊事件
- jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
- jquery中交替點(diǎn)擊事件的實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)點(diǎn)擊label的同時(shí)觸發(fā)文本框點(diǎn)擊事件的方法
- jQuery中slideUp 和 slideDown 的點(diǎn)擊事件
- jQuery實(shí)現(xiàn)移動(dòng) 和 漸變特效的點(diǎn)擊事件
- jQuery實(shí)現(xiàn)點(diǎn)擊行選中或取消CheckBox的方法
- jQuery移除或禁用html元素點(diǎn)擊事件常用方法小結(jié)
相關(guān)文章
JQuery 無(wú)廢話系列教程(一) jquery入門(mén) [推薦]
貝殼(就是本文作者了)也屬于剛剛會(huì)用點(diǎn)JQuery的那一類(lèi)型, 在學(xué)習(xí)過(guò)程中也遇到挺多問(wèn)題,特別是在開(kāi)始入門(mén)的時(shí)候.一直準(zhǔn)備寫(xiě)些有關(guān)JQuery的文章,但又恐自己文筆及表達(dá)能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯(cuò)誤或者不合適的理解望廣大朋友直接指出批評(píng).2009-06-06jQuery簡(jiǎn)單實(shí)現(xiàn)tab選項(xiàng)卡切換效果
這篇文章主要介紹使用jQuery封裝了一個(gè)tab選項(xiàng)卡切換的插件,需要的朋友可以參考下。2016-06-06jquery超簡(jiǎn)單實(shí)現(xiàn)手風(fēng)琴效果的方法
這篇文章主要介紹了jquery超簡(jiǎn)單實(shí)現(xiàn)手風(fēng)琴效果的方法,只需要幾行代碼即可實(shí)現(xiàn)手風(fēng)琴效果的樣式變換功能,需要的朋友可以參考下2015-06-06深入理解jQuery.data() 的實(shí)現(xiàn)方式
本篇文章主要介紹了jQuery.data() 的實(shí)現(xiàn)方式,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11利用jQuery.Validate異步驗(yàn)證用戶名是否存在(推薦)
這篇文章主要介紹了利用jQuery.Validate異步驗(yàn)證用戶名是否存在的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉菜單動(dòng)態(tài)添加數(shù)據(jù)點(diǎn)擊滑出收起其他功能,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-06-06jquery獲得當(dāng)前html頁(yè)面源碼的方法
這篇文章主要介紹了jquery獲得當(dāng)前html頁(yè)面源碼的方法,涉及jquery針對(duì)頁(yè)面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jquery操作select常見(jiàn)方法大全【7種情況】
這篇文章主要介紹了jquery操作select常見(jiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作select常見(jiàn)的7種情況與相關(guān)操作技巧,需要的朋友可以參考下2019-05-05基于jquery實(shí)現(xiàn)百度新聞導(dǎo)航菜單滑動(dòng)動(dòng)畫(huà)
這篇文章主要介紹了基于jquery實(shí)現(xiàn)百度新聞導(dǎo)航菜單滑動(dòng)動(dòng)畫(huà),感興趣的小伙伴們可以參考一下2016-03-03