jQuery添加options點擊事件并傳值實例代碼

    說明：
    最近剛接了一個項目，其中有項目需求要求根據(jù)選擇不同店鋪選項，上送不同id值，展示不同商品列表
    先給大家展示下實現(xiàn)效果圖：如果大家感興趣對此很感興趣，可以參考下實現(xiàn)代碼。
    
    var formStr = "{'supplierId':'供應鏈企業(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)知識，希望對大家有所幫助