码迷,mamicode.com
首页 > 其他好文 > 详细

省市联动

时间:2016-11-07 02:01:38      阅读:233      评论:0      收藏:0      [点我收藏+]

标签:meta   cte   第一个   utf-8   name   省份   app   java   pen   

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select id="province"></select>
<select id="city"></select>
<script src="./js/省市联动.js"></script>
</body>
</html>

javascript

 

(function() {
var data = [
{
name: ‘四川省‘,
citys: [‘成都市‘, ‘绵阳市‘, ‘南充市‘]
},
{
name: ‘广东省‘,
citys: [‘广州市‘, ‘深圳市‘, ‘东莞市‘]
},
{
name: ‘河南省‘,
citys: [‘郑州市‘, ‘洛阳市‘]
},
{
name: ‘台湾省‘,
citys: [‘郑州市‘, ‘洛阳市‘]
}
];

var provinceSelect = document.getElementById(‘province‘);
var citySelect = document.getElementById(‘city‘);

// 把省份select里面的内容显示出来
for(var i = 0; i < data.length; i++) {
// 省份的名称 data[i].name
var option = document.createElement(‘option‘);
option.innerHTML = data[i].name;
// option.onclick = function() {
// showCitys(this.index);
// // console.log(123);
// };
provinceSelect.appendChild(option);
}

provinceSelect.onchange = function() {
showCitys(provinceSelect.selectedIndex);
};

// 在citySelect中,应该默认显示第一个省份的城市
showCitys(0);

// 显示城市select里面的内容
function showCitys(provinceIndex) {
// 清空citySelect里面的内容
citySelect.innerHTML = ‘‘;

for(var i = 0; i < data[provinceIndex].citys.length; i++) {
var option = document.createElement(‘option‘);
option.innerHTML = data[provinceIndex].citys[i];
citySelect.appendChild(option);
}
}

// showCitys(1);
})();

省市联动

标签:meta   cte   第一个   utf-8   name   省份   app   java   pen   

原文地址:http://www.cnblogs.com/xuyang1995/p/6036954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!