js简单省市联动
js学习简单的省市联动,代码注释的很清楚了
思路:
1.省用数组存数据,市用二维数组存数据
2.初始化数据,给省,市添加Options数据
3.联动添加onchange事件
代码实现如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js省市联动</title>
</head>
<body>
<form action="">
<!--监听change事件-->
选择省:<select id="province" onchange="changeCity(this.selectedIndex)"></select>
选择市:<select id="city"></select>
</form>
<script type="text/javascript">
var arr_provinces = ["江苏省","广东省","湖北省","福建省"];
var arr_citys = [
["南京市","无锡市","扬州市","苏州市"],
["湛江市","珠海市","中山市","佛山市"],
["武汉市","黄冈市","仙桃市","鄂州市"],
["厦门市","福州市","泉州市","漳州市"]
];
//拿到控件
var province = document.getElementById("province");
var city = document.getElementById("city");
//给select 初始化数据
province.onload = init(); //加载完毕初始化数据
//初始化数据
function init(){
//给省初始化数据
//给options 的长度
province.options.length = arr_provinces.length;
//赋值
for(var i = 0 ; i < arr_provinces.length ; i++){
//显示文本
province.options[i].text = arr_provinces[i];
//属性的值
province.options[i].value = arr_provinces[i];
}
//设置默认的选项
var position = 0;
province.selectedIndex = position;
//给城市里面添加数据
changeCity(position)
}
//城市的数据
function changeCity(index){
//拿到对应的 城市数据
var citys = arr_citys[index];
//设置options 的长度属性
city.options.length = citys.length;
//赋值
for(var i = 0 ; i < citys.length; i++){
//显示文本
city.options[i].text = citys[i];
//属性的值
city.options[i].value = citys[i];
}
city.selectedIndex = 0 ;
}
</script>
</body>
</html>