<!DOCTYPE html>
<html>
<head>
<title>城市三级联动</title>
<style>
h1{
color:#8B0000;
text-align:center;
}
div{
width:100%;
text-align:center;
}
</style>
</head>
<body>
<h1>城市三级联动</h1>
<div>
<select id="province">
<option value="-1">--请选择--</option>
</select>
<select id="city"><option>--请选择--</option></select>
<select id="country"><option>--请选择--</option></select>
</div>
<script type="text/javascript">
var provinceArr = ['上海','湖南','江苏'];
var cityArr = [
['上海市'],
['长沙市','岳阳市','株洲市','湘潭市','邵阳市'],
['苏州市','南京市','扬州市','盐城市']]
var countryArr = [
[['黄浦区','静安区','长宁区','浦东区']
],[
['芙蓉区','岳麓区','天心区','开福区','雨花区','望城区'],
['岳阳楼区','云溪区','岳阳县','华容县','湘阴县','平江县'],
['天元区','芦淞区','荷塘区','石峰区','渌口区'],
['雨湖区','岳塘区','湘潭县','韶山市','湘乡区'],
['洞口县','隆回县','绥宁县','邵阳县','邵东县']
],[
['虎丘区','吴中区','相城区','姑苏区','吴江区'],
['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
['邗江区','广陵区','江都区'],
['盐都区','亭湖区','大丰区','响水县','滨海县']
]];
//为select添加option
function createOption(obj,data){ //obj表示下拉列表的名字;data表示数组(一个下拉菜单里所有值组成的数组)
for(var i in data){ //循环数组
var op = new Option(data[i],i); //<option value="i">data[i]</option>
obj.options.add(op); //添加option(即下拉列选项)
}
}
var province = document.getElementById('province'); //获得ID为'province'的select元素
createOption(province,provinceArr); //调用函数createOption()
var city = document.getElementById("city");
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
};
var country = document.getElementById("country");
city.onchange = function(){
country.options.length = 0;
createOption(country,countryArr[province.value][city.value]);
};
province.onchange = function(){
city.options.length = 0;
createOption(city,cityArr[province.value]);
if(province.value >= 0){
city.onchange();
}else{
country.options.length = 0;
}
};
</script>
</body>
</html>