三级联动-jQuery
2017-02-04 本文已影响0人
Lamport
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 三级联动-jQuery </title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<select name="" id="province">
<option value="">请选择省份</option>
</select>
<select name="" id="city">
<option value="">请选择城市</option>
</select>
<select name="" id="county">
<option value="">请选择县区</option>
</select>
<script type="text/javascript">
var arrProvince = ["黑龙江","吉林","辽宁","河北","山西"]; // 省
var arrCity = [ // 市
["哈尔滨市","齐齐哈尔市","佳木斯市"],
["长春市","吉林市","松原市"],
["大连市","本溪市","抚顺市"],
["保定市","承德市","石家庄市"],
["太原市","大同市","长治市"]
];
var arrCounty = [ // 县区
[
["延寿县","通河县","木兰县"],
["昂昂溪区","克东县","建华区","富裕县"],
["向阳区","抚远县","桦南县","前进区"]
],[
["朝阳区","农安县","绿园区","双阳区"],
["昌邑区 ","永吉县","舒兰市 "],
["乾安县","宁江区","扶余县","前郭县"]
],[
["甘井子","庄河","金州"],
["溪湖区","明山区","平山区","南芬区"],
["抚顺县","清原满族自治县","新宾满族自治县"]
],[
["南市区","满城县","新市区","清苑区"],
["兴隆县","平泉县","隆化县"],
["赞皇县","元氏县","无极县"]
],[
["迎泽区","小店区","清徐县"],
["新荣区","南郊区","广灵县","左云县"],
["黎城","沁县","武乡","壶关"]
]
];
for( var i = 0; i < arrProvince.length; i++ ){
$("#province").append("<option value=" + i + ">" + arrProvince[i] + "</option>");
};
$("#province").change(function(){
// 下一次选择之前 清除操作 长度变成 1;使请选择为默认显示
$("#city")[0].length = 1;
// 找到了被选中选择的省下标（下标需要去除 请选择）
var $indexProvince = $(":selected").val();
var $city = arrCity[$indexProvince];
for (var j = 0; j< $city.length ; j++) {
$("#city").append("<option value=" + $indexProvince + "_" + j + ">"+$city[j]+"</option>");
};
});
$("#city").change(function(){
// 下一次选择之前 清除操作 长度变成 1;使请选择为默认显示
$("#county")[0].length = 1;
var str = $("#city :selected").val();
var arr = str.split("_");
var $provincIndex = arr[0];
var $cityIndex = arr[1];
var $county = arrCounty[$provincIndex][$cityIndex];
for( var k = 0; k < $county.length; k++ ){
$("#county").append("<option>" + $county[k] + "</option>")
};
});
</script>
</body>
</html>
