jQuery添加options點擊事件并傳值實例代碼
更新時間:2016年05月18日 11:47:48 作者:簡一118
這篇文章主要介紹了jQuery添加options點擊事件并傳值實例代碼,非常具有參考價值,需要的朋友一起看下吧
說明:
最近剛接了一個項目,其中有項目需求要求根據選擇不同店鋪選項,上送不同id值,展示不同商品列表
先給大家展示下實現效果圖:如果大家感興趣對此很感興趣,可以參考下實現代碼。
var formStr = "{'supplierId':'供應鏈企業(yè)|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post", dataType : "json", cache : false, url : "../../../webservice/gmall.json", // 提交到一般處理程序請求數據 data :"businessCode=61001001&message="+encodeURI(formStr).replace(/\+/g, "%2B"), async : false, error : function() { //alert("connection error!!!"); layer.alert("數據加載失敗,請及時聯系管理員!",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", // 提交到一般處理程序請求數據 data :"businessCode=61001003&message="+encodeURI(formStrshop).replace(/\+/g, "%2B"), async : false, error : function() { layer.alert("數據加載失敗,請及時聯系管理員!",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點擊事件并傳值實例代碼的相關知識,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
JQuery 無廢話系列教程(一) jquery入門 [推薦]
貝殼(就是本文作者了)也屬于剛剛會用點JQuery的那一類型, 在學習過程中也遇到挺多問題,特別是在開始入門的時候.一直準備寫些有關JQuery的文章,但又恐自己文筆及表達能力有限而"誤人子弟",最終還是鼓起勇氣. 如在文章中有錯誤或者不合適的理解望廣大朋友直接指出批評.2009-06-06利用jQuery.Validate異步驗證用戶名是否存在(推薦)
這篇文章主要介紹了利用jQuery.Validate異步驗證用戶名是否存在的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-12-12原生Ajax 和jQuery Ajax的區(qū)別示例分析
這篇文章主要介紹了原生Ajax 和Jq Ajax的區(qū)別示例分析,需要的朋友可以參考下2014-12-12jQuery實現下拉菜單動態(tài)添加數據點擊滑出收起其他功能
這篇文章主要介紹了jQuery實現下拉菜單動態(tài)添加數據點擊滑出收起其他功能,本文給大家介紹的非常詳細,需要的朋友可以參考下2018-06-06