<body>
<select id="province">
<option value="-1">请选择</option>
</select>
<select id="city"></select>
<select id="country"></select>
<script type="text/javascript">
var provinceArr = ['上海','江苏','河北'];
var cityArr = [
['上海市'],
['苏州市','南京市','扬州市'],
['石家庄','秦皇岛','张家口']
]
var countryArr = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
],
[
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区']
], [
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宣化区', '下花园区']
]
];
var province = document.getElementById('province');
var city = document.getElementById('city');
var country = document.getElementById('country');
var provinceStr = '';
for(var i in provinceArr){
provinceStr += '<option value="' + i + '">' + provinceArr[i] + '</option>';
};
province.innerHTML += provinceStr;
province.onchange = function(){
var provinceIndex = province.value;
city.innerHTML = "";
for(var i in cityArr[provinceIndex] ){
city.innerHTML += '<option value="' + i + '">' + cityArr[provinceIndex][i] + '</option>';
}
country.innerHTML = "";
for(var i in countryArr[provinceIndex][provinceIndex] ){
country.innerHTML += '<option value="' + i + '">' + countryArr[provinceIndex][0][i] + '</option>';
}
}
city.onchange = function(){
var provinceIndex = province.value;
var cityIndex = city.value;
country.innerHTML = "";
for(var i in countryArr[provinceIndex][cityIndex] ){
country.innerHTML += '<option value="' + i + '">' + countryArr[provinceIndex][cityIndex][i] + '</option>';
}
}
</script>
以上是我自己写的三级联动的js，记得都只是会用插件或copy网上的代码，没想到早上看书看到的题目，本想在上班的时候想想试试，没想到就写出来了，思路虽简单，就是分俩个情况，1当第一个select发生改变时，后面的select随之改变，根据第一个select的value值，把后面cityarr【value】，countryarr【value】【0】，用for循环和innerHTML加到后俩个select就可以。2，只有第二个select改变时，第三个select跟着改变。分别取得第一个和第二个select的值，就可以用for循环出需要改变的第三个select的值了。
感觉这个思路自己写出了，都觉得有点白痴啊！不过刚刚开始写，水平是差一点的了，哈哈！
共同学习，写下你的评论
评论加载中...
作者其他优质文章
