jquery Add options Click event and pass value instance code _jquery

Description

Recently received a project, which has a project requirements according to the choice of different store options, send different ID values, display a list of different products

First show you the implementation of the picture: If you are interested in this very interested, you can refer to the implementation of the Code.

var formstr = "{' SupplierId ': ' Supply Chain Enterprise |%-jm-sprt-%|93794498-3 '}"; $.ajax ({type: "Post", DataType: "JSON", Cache:false, url: "...) /.. /.. /webservice/gmall.json ",//submit to General handler request data:" Businesscode=61001001&message= "+encodeuri (FORMSTR). Replace (/\ +/g, "%2b"), Async:false, Error:function () {//alert ("Connection error!!!"); Layer.alert ("Data load failed, please contact admin!"
", 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>");  }) $ (' click ', function () {var opt = $ (this). Children (' option:selected '); var shopid = $ (opt). attr (' id ');
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 ",//submit to General handler request data:" Businesscode=61001003&message= "+encodeuri (formstrshop). Replace (/\+/g, "%2b"), Async:false, Error:function () {Layer.alert ("Data loading failed, please contact admin!")
", 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>");
})
} 
}
}); })
}
}
});

Simple example

<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). In (' Click ', function () {This step can be omitted, without the option of the Click event
var $opt = $ (this). Children ('　　 Option:selected ');
Console.log ($ ($opt). attr (' ID '), $ ($opt). Val (), $ ($opt). html ());
})})
</script>

The above is a small set of jquery to introduce you to add options click event and pass the value of the example code related knowledge, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!