<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<style>
. clsinit{
width:435px;
height:35px;
line-height:35px;
padding-left:10px
}
. clstip{
padding-top:5px;
Background-color: #eee;
Display:none;
}
. btn{
border: #666 1px solid;
padding:2px;
width:65px;
Float:right;
margin-top:6px;
margin-right:6px;
}
</style>
<body>
<div class= "Clsinit" >
Manufacturer: <select id= "Self" ><option> please select </option></select>
Brand: <select id= "SelT" ><option> Please select </option></select>
Model: <select id= "SELC" ><option> Please select </option></select>
<input id= "button" type= "button" value= "Query" class= "BTN" >
</div>
<div class= "Clsinit" id= "Divtip" ></div>
<script type= "Text/javascript" >
$ (function () {
var arrdata={
Producers 1:{brand 1_1: "Model 1-1-1, Model 1-1-2", Brand 1_2: "Model 1-2-1, Model 1-2-2"},
Producers 2:{brand 2_1: "Model 2-1-1, Model 2-1-2", Brand 2_2: "Model 2-2-1, Model 2-2-2"},
Producers 3:{brand 3_1: "Model 3-1-1, Model 3-1-2", Brand 3_2: "Model 3-2-1, Model 3-2-2"}
};
function Objinit (obj) {
return $ (obj). Append ("<option> Please select </option>");
};
$.each (Arrdata,function (pf,ps) {
$ ("#selF"). Append ("<option>" +pf+ "</option>");
});
$ ("#selF"). Change (function () {
Objinit ("#selT");
Objinit ("#selC");
$.each (Arrdata,function (pf,ps) {
if ($ ("#selF option:selected"). Text () ==PF) {
$.each (Ps,function (pt,pc) {
$ ("#selT"). Append ("<option>" +pt+ "</option>");
})
$ ("#selT"). Change (function () {
Objinit ("#selC");
$.each (Ps,function (pt,pc) {
if ($ ("#selT option:selected"). Text () ==pt) {
$.each (Pc.split (', '), function () {
$ ("#selC"). Append ("<option>" +this+ "</option>");
})
}
})
})
}
})
})
$ ("#Button"). Click (function () {
var strvalue= "Your choice of vendor:";
strvalue+=$ ("#selF option:selected"). Text ();
strvalue+= " Your choice of brand is:";
strvalue+=$ ("#selT option:selected"). Text ();
strvalue+= " the model you selected is:";
strvalue+=$ ("#selC option:selected"). Text ();
$ ("#divTip"). Show (). addclass ("Clstip"). HTML (strvalue);
})
})
</script>
</body>
jquery drop-down list box linkage display data