js 实现省市 二级联动
第一种方法
1 <body> 2 <select name="" id="province" onchange="func1(this)"> 3 <option value="">省份</option> 4 </select> 5 <select name="" id="city"> 6 <option value="">城市</option> 7 </select> 8 </body> 9 10 <script> 11 //创建城市数组 12 data = {"河南省":["郑州","商丘"],"新疆":["乌鲁木齐","天山"]}; 13 var pro = document.getElementById("province"); 14 var city = document.getElementById("city"); 15 16 //添加省份 17 //这里的i是省份 18 for(var i in data){ 19 var option_pro = document.getElementById("option"); 20 option_pro.innerHTML = i; 21 pro.appendChild(option_pro) 22 } 23 24 25 //onchange 选择省份改变的时候 26 function func1(self){ 27 //找到每次要选择的哪个省份 28 var choice = (self.options[self.selectedIndex]).innerHTML; 29 30 //删除上个省份的选择 31 var options = city.children; 32 for(var k=0;k<options.length;k++){ 33 city.removeChild(options[k--]); 34 } 35 36 //把城市写到对应的省份 37 for(var i in data[choice]){ 38 var option_city = document.createElement("option"); 39 option_pro.innerHTML = data[choice][i]; 40 city.appendChild(option_city) 41 } 42 } 43 </script>
第二种方法
1 <body onload="init()"> 2 <select name="" id="provices" onchange=" changeProvice(this.selectedIndes)"></select> 3 <select name="" id="citys"></select> 4 </body> 5 <script> 6 //设置省市 7 var provices = new Array(); 8 provices[0] = "请选择省份" 9 provices[1] = "江苏省" 10 provices[2] = "浙江省" 11 provices[3] = "河南省" 12 13 var citys = new Array(); 14 citys[0] = new Array("请选择城市") 15 citys[1] = new Array("南京", "无锡", "常州", "苏州") 16 citys[2] = new Array("杭州", "宁波", "温州") 17 citys[3] = new Array("郑州", "商丘", "洛阳") 18 19 //填充省 20 function setProvices(){ 21 //声明一个sltprovices 22 //获取省 数组 23 //写到新创建的option中去 24 25 26 var sltprovices = document.getElementById("provices") 27 28 var opt = null; 29 for(var i = 0; i<provices.length;i++){ 30 opt = document.createElement("option") 31 sltprovices.options.add(opt) 32 opt.text = provices[i] 33 opt.value = i 34 } 35 36 37 } 38 39 //填充城市 40 //根据pid来确定是哪一个省的城市 41 function setCity(pid){ 42 var sltcitys = document.getElementById("citys") 43 44 45 var opt = null 46 for(var i=0;i<citys[pid].length;i++){ 47 opt = document.createElement("option") 48 sltcitys.options.add(opt) 49 opt.text = citys[pid][i] 50 opt.value = i 51 } 52 53 54 } 55 56 //清理城市 57 function clear(){ 58 sltcitys = document.getElementById("citys") 59 for(var i=sltcitys.options.length - 1; i>=0;i--){ 60 sltcitys.options.remove(i) 61 } 62 } 63 64 //初始化 65 function init(){ 66 setProvices() 67 changeProvice(0) 68 } 69 70 //改变省的时候 71 function changeProvice(pid){ 72 clear(); 73 setCity(pid) 74 } 75 </script>
