<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Jquery-1.11.0.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
function Objinit (obj) {
return $ (obj). html ("<option> please select </option>");
}
var arrdata = {
Jiangxi Province: {Yichun: "Yuanzhou District, Wanzai County",
Brand 1_2: "Model 1_2_1, Model 1_2_2"},
Hunan Province: {Shaoyang: "Shaoyang County, Model 2_1_2",
Brand 2_2: "Model 2_2_1, Model 2_2_2"},
Manufacturer 3:{Brand 3_1: "Model 3_1_1, Model 3_1_2",
Brand 3_2: "Model 3_2_1, Model 3_2_2"},
};
$.each (Arrdata, function (PF) {
$ ("#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>");
});
}
});
});
}
});
});
$ ("#Button1"). Click (function () {
var strvalue = "Your choice of province:";
strvalue + = $ ("#selF option:selected"). Text ();
strvalue + = " your chosen city:";
strvalue + = $ ("#selT option:selected"). Text ();
strvalue + = " Your choice of District:";
strvalue + = $ ("#selC option:selected"). Text ();
$ ("#divTip"). Show (). HTML (strvalue);
});
})
</script>
<body>
<div class= "Clsinit" >
Province: <select id= "Self" ><option> please select </option></select>
City: <select id= "SelT" ><option> Please select </option></select>
Counties: <select id= "SELC" ><option> Please select </option></select>
<input id= "Button1" type= "button" value= "Query" class= "BTN"/>
</div>
<div class= "Clsinit" id= "Divtip" ></div>
</body>