html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区联动</title>
</head>
<body>
<select id="province"></select>
<br>
<select id="city"></select>
<br>
<select id="area"></select>
<script src="./js/省市区联动.js"></script>
</body>
</html>
js部分：
(function() {
var data = [
{
name: '四川省',
city: [
{
name: '成都市',
area: ['成都市1区', '成都2区', '成都3区'],
},
{
name: '都江堰市',
area: ['都江堰市1区', '都江堰市2区', '都江堰市3区'],
},
{
name: '绵阳市',
area: ['绵阳市1区', '绵阳市2区', '绵阳市3区'],
},
],
},
{
name: '广东省',
city: [
{
name: '广州市',
area: ['广州市1区', '广州市2区', '广州市3区'],
},
{
name: '深圳市',
area: ['深圳市1区', '深圳市2区', '深圳市3区'],
},
],
},
{
name: '河南省',
city: [
{
name: '洛阳市',
area: ['洛阳市1区', '洛阳市2区', '洛阳市3区'],
},
{
name: '开封市',
area: ['开封市1区', '开封市2区', '开封市3区'],
},
{
name: '郑州市',
area: ['郑州市1区', '郑州市2区', '郑州市3区'],
},
],
},
];
var provinceSelectObj = document.getElementById('province');
var citySelectObj = document.getElementById('city');
var areaSelectObj = document.getElementById('area');
// 拼字符串
// var htmlText = '';
// // 遍历数组
// for(var i = 0; i < data.length; ++i) {
// htmlText = htmlText + '<option>' + data[i].name + '</option>';
// }
// // console.log(htmlText);
// provinceSelectObj.innerHTML = htmlText;
for(var i = 0; i < data.length; ++i) {
var newOption = document.createElement('option');
newOption.innerHTML = data[i].name;
provinceSelectObj.appendChild(newOption);
}
provinceSelectObj.onchange = function() {
renderCity(provinceSelectObj.selectedIndex);
renderArea(provinceSelectObj.selectedIndex, 0);
};
citySelectObj.onchange = function() {
renderArea(provinceSelectObj.selectedIndex, citySelectObj.selectedIndex);
};
renderCity(0);
renderArea(0, 0);
function renderCity(provinceIndex) {
// 每次显示新城市之前，先清空之前的城市
citySelectObj.innerHTML = '';
var arr = data[provinceIndex].city;
for(var i = 0; i < arr.length; ++i) {
var newOption = document.createElement('option');
newOption.innerHTML = arr[i].name;
citySelectObj.appendChild(newOption);
}
}
function renderArea(provinceIndex, cityIndex) {
// 显示新的区之前，先把之前显示的区清空
areaSelectObj.innerHTML = '';
var arr = data[provinceIndex].city[cityIndex].area;
for(var i = 0; i < arr.length; ++i) {
var newOption = document.createElement('option');
newOption.innerHTML = arr[i];
areaSelectObj.appendChild(newOption);
}
}
})();
浙公网安备 33010602011771号