js省市联动
2015-07-25 00:10
411 查看
思路:通过二维数组实现省市联动。
第一步:创建一个二维数组来保存省份与城市
第二步:把所有的省市添加到省所在的下拉列表中
第一步:创建一个二维数组来保存省份与城市
var cityList = new Array(); cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山']; cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区']; cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']; cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边']; cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区']; cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区']; cityList['江苏省'] = ['南京市','苏州市','无锡市']; cityList['浙江省'] = ['杭州市','宁波市','温州市']; cityList['四川省'] = ['四川省','成都市']; cityList['海南省'] = ['海口市']; cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市']; cityList['山东省'] = ['济南市','青岛市','烟台市']; cityList['江西省'] = ['江西省','南昌市']; cityList['广西省'] = ['柳州市','南宁市']; cityList['安徽省'] = ['安徽省','合肥市']; cityList['河北省'] = ['邯郸市','石家庄市']; cityList['河南省'] = ['郑州市','洛阳市']; cityList['湖北省'] = ['武汉市','宜昌市']; cityList['湖南省'] = ['湖南省','长沙市']; cityList['陕西省'] = ['陕西省','西安市']; cityList['山西省'] = ['山西省','太原市']; cityList['黑龙江省'] = ['黑龙江省','哈尔滨市']; cityList['其他'] = ['其他'];
第二步:把所有的省市添加到省所在的下拉列表中
//把所有的省添加到对应的selec中 function getProvince(){ //获取到province下拉列表 var province=document.getElementById('province'); //遍历数组把所有的省添加到select中 for(var i in cityList ){ province.add(new Option(i,i)); } } window.onload=getProvince; //当选择省份的时候设置相应的city,通过省select的onchange事件触发 function setCity(){ var province=document.getElementById('province'); var city=document.getElementById('city'); //设置城市的时候先清空select city.length=0; //遍历数组,把所有的市绑定到相应的select中 for(i in cityList){ if(i in cityList){ if(province.value==i){ for(j in cityList[i]){ city.add(new Option(cityList[i][j],cityList[i][j])); } } } } }
相关文章推荐
- JavaScript对Cookie进行读写操作实例
- JavaScript类继承及实例化的方法
- javascript单例模式的简单实现方法
- javascript实现信息增删改查的方法
- 基于javascript实现单选及多选的向右和向左移动实例
- javascript解析xml实现省市县三级联动的方法
- javascript页面倒计时实例
- javascript文件加载管理简单实现方法
- javascript创建动态表单的方法
- javascript实现动态导入js与css等静态资源文件的方法
- 给js文件传参数[转]
- js节点创建
- JS DOM编程艺术——HTML5—— JS学习笔记2015-7-24(第91天)
- JavaScript学习笔记——变量和数据类型
- jstl 转义字符
- JS高亮提示插件spket
- JS函数式编程【译】2.函数式编程基础
- Functional Programming in Javascript 中文翻译 —— 目录和介绍
- js去除数字前的0
- js 操作select option