This small case for less data similar to three linkage of small effect, provinces, municipalities, three linkage see https://www.cnblogs.com/xiaoyaolang/p/11896484.html
<body>
<select name="" id="prov">
<option value="">请选择省</option>
</select>
<select name="" id="city">
<option value="">请选择市</option>
<option value="">请先选择省</option>
</select>
<select name="" id="county">
<option value="">请选择县</option>
<option value="">请先选择市</option>
</select>
</body>
</html>
<script src="jquery-1.8.1.min.js"></script>
<script>
var provArr = ["辽宁","Shanxi "," Hebei "];
var cityArr = [[" Shenyang "," Dalian "," Tieling "], [" ground "," Taiyuan "], [" imitate "," Shijiazhuang " "Tangshan", "male security"]];
// 0. 1 2
// 012,010,123
var countyArr = [[[ "s1 ", "s2"], [ "d1"], [ " Changtu", "Lotus Township"]], [[ "t1 ", "t2"], [ "y1"] ], [[ "h1"], [ "s1", "s2"], [ "tangshan1"], [ "xiongan1"]]];
// 00 01 02 10 11 20 21
after the page loads // province array information is added to the page
for (var I = 0; I <provArr.length; I ++) {
. $ ( "# Prov") the append ($ ( "<Option value =" + I + ">" + provArr [I] + "</ Option>"));
}
. $ ( "# Prov") Change (function () {// add City, Province click coming
$ ( "# City") [0] = .length. 1;
var index = $ (this) .val () ; // save the subscript 0-1
var cityAry cityArr = [index];
for (var I = 0; I <cityAry.length;i++){
$("#city").append($("<option value="+index+"-"+i+">"+cityAry[i]+"</option>"));
}
})
$("#city").change(function(){
$("#county")[0].length = 1;
var index = $(this).val();//0-0 0-1 0-2
var proIndex = index.split("-")[0];//省的下标
var cityIndex = index.split("-")[1];//城市的下标
var countyAry = countyArr[proIndex][cityIndex];
for(var i = 0; i < countyAry.length; i++){
$("#county").append($("<option>"+countyAry[i]+"</option>"));
}
})
</script>