jQuery添加options點擊事件并傳值實例代碼
說明:
最近剛接了一個項目,其中有項目需求要求根據(jù)選擇不同店鋪選項,上送不同id值,展示不同商品列表
先給大家展示下實現(xiàn)效果圖:如果大家感興趣對此很感興趣,可以參考下實現(xiàn)代碼。
var formStr = "{'supplierId':'供應(yīng)鏈企業(yè)|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post", dataType : "json", cache : false, url : "../../../webservice/gmall.json", // 提交到一般處理程序請求數(shù)據(jù) data :"businessCode=61001001&message="+encodeURI(formStr).replace(/\+/g, "%2B"), async : false, error : function() { //alert("connection error!!!"); layer.alert("數(shù)據(jù)加載失敗,請及時聯(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", // 提交到一般處理程序請求數(shù)據(jù) data :"businessCode=61001003&message="+encodeURI(formStrshop).replace(/\+/g, "%2B"), async : false, error : function() { layer.alert("數(shù)據(jù)加載失敗,請及時聯(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>" ); }) } } }); }) } } });
簡單示例
<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(){ 此步可省略,無需管option的點擊事件 var $opt = $(this).children('option:selected'); console.log($($opt).attr('id'),$($opt).val(),$($opt).html()); // }) }) }) </script>
以上所述是小編給大家介紹的jQuery添加options點擊事件并傳值實例代碼的相關(guān)知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- jquery無法為動態(tài)生成的元素添加點擊事件的解決方法(推薦)
- jquery 觸發(fā)a鏈接點擊事件解決方案
- jQuery實現(xiàn)當(dāng)按下回車鍵時綁定點擊事件
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- jquery中交替點擊事件的實現(xiàn)代碼
- jquery實現(xiàn)點擊label的同時觸發(fā)文本框點擊事件的方法
- jQuery中slideUp 和 slideDown 的點擊事件
- jQuery實現(xiàn)移動 和 漸變特效的點擊事件
- jQuery實現(xiàn)點擊行選中或取消CheckBox的方法
- jQuery移除或禁用html元素點擊事件常用方法小結(jié)
相關(guān)文章
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學(xué)習(xí)過程中也遇到挺多問題,特別是在開始入門的時候.一直準備寫些有關(guān)JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.2009-06-06jquery超簡單實現(xiàn)手風(fēng)琴效果的方法
這篇文章主要介紹了jquery超簡單實現(xiàn)手風(fēng)琴效果的方法,只需要幾行代碼即可實現(xiàn)手風(fēng)琴效果的樣式變換功能,需要的朋友可以參考下2015-06-06利用jQuery.Validate異步驗證用戶名是否存在(推薦)
這篇文章主要介紹了利用jQuery.Validate異步驗證用戶名是否存在的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12jQuery實現(xiàn)下拉菜單動態(tài)添加數(shù)據(jù)點擊滑出收起其他功能
這篇文章主要介紹了jQuery實現(xiàn)下拉菜單動態(tài)添加數(shù)據(jù)點擊滑出收起其他功能,本文給大家介紹的非常詳細,需要的朋友可以參考下2018-06-06基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫
這篇文章主要介紹了基于jquery實現(xiàn)百度新聞導(dǎo)航菜單滑動動畫,感興趣的小伙伴們可以參考一下2016-03-03