js实现城市级联选择,二级选择
代码实例:以下代码可以直接粘贴使用,但里面的城市并不完整。
实现原理是利用 js的onchang方法,调用city.js文件里的changecity()函数,var text = city[index][i].split(“-”); 这个方法是把new Array()数组拆分进text变量数组里,然后text[0]是文本区域中的值,text[1]是选中的值。
1 <script type="text/javascript" src=”city.js”></script> 2 3 <form action=”" method=”post” name=”form2″>省份:<select name=”sf” onchange=”changecity()” > 4 <option selected>选择省份</option> 5 <option value=”江苏省”>江苏省</option> 6 <option value=”北京”>北京</option> 7 <option value=”天津”>天津</option> 8 <option value=”上海”>上海</option> 9 <option value=”重庆”>重庆</option> 10 <option value=”广东省”>广东省</option> 11 <option value=”浙江省”>浙江省</option> 12 <option value=”福建省”>福建省</option></select> 13 城市: 14 <SELECT name=city style=”width:80″> 15 <OPTION>==所在城市==</OPTION> 16 </SELECT> 17 </form>
city.js 代码:
1 // JavaScript Document 2 function changecity(){ 3 index = form2.sf.options.selectedIndex-1; 4 form2.city.length = city[index].length; 5 for(var i = 0;i<city[index].length;i++) 6 { 7 var text = city[index][i].split(“-”); 8 form2.city.options[i].text = text[0]; 9 form2.city.options[i].value =text[1]; 10 } 11 }var city = new Array( 12 new Array( 13 //”江苏省(全部地区)-江苏省(全部地区)”, 14 “江阴市-江阴市”, 15 “无锡市-无锡市”, 16 “宜兴市-宜兴市”, 17 “常州市-常州市”, 18 “南京市-南京市”, 19 “溧水县-溧水县”, 20 “高淳县-高淳县”, 21 “苏州市-苏州市”, 22 “常熟市-常熟市”, 23 “张家港市-张家港市”, 24 “昆山市-昆山市”, 25 “吴江市-吴江市”, 26 “太仓市-太仓市”, 27 “溧阳市-溧阳市”, 28 “金坛市-金坛市”, 29 “南通市-南通市”, 30 “海安县-海安县”, 31 “如东县-如东县”, 32 “启东市-启东市”, 33 “如皋市-如皋市”, 34 “通州市-通州市”, 35 “海门市-海门市”, 36 “镇江市-镇江市”, 37 “丹阳市-丹阳市”, 38 “扬中市-扬中市”, 39 “句容市-句容市”, 40 “徐州市-徐州市”, 41 “丰县-丰县”, 42 “沛县-沛县”, 43 “铜山县-铜山县”, 44 “睢宁县-睢宁县”, 45 “新沂市-新沂市”, 46 “邳州市-邳州市”, 47 “连云港市-连云港市”, 48 “赣榆县-赣榆县”, 49 “东海县-东海县”, 50 “灌云县-灌云县”, 51 “淮安市-淮安市”, 52 “涟水县-涟水县”, 53 “洪泽县-洪泽县”, 54 “盱眙县-盱眙县”, 55 “金湖县-金湖县”, 56 “盐城市-盐城市”, 57 “响水县-响水县”, 58 “滨海县-滨海县”, 59 “阜宁县-阜宁县”, 60 “射阳县-射阳县”, 61 “建湖县-建湖县”, 62 “盐都县-盐都县”, 63 “东台县-东台县”, 64 “大丰市-大丰市”, 65 “扬州市-扬州市”, 66 “宝应县-宝应县”, 67 “仪征县-仪征县”, 68 “高邮市-高邮市”, 69 “江都市-江都市”, 70 “宿迁市-宿迁市”, 71 “宿豫县-宿豫县”, 72 “沭阳县-沭阳县”, 73 “泗阳县-泗阳县”, 74 “泗洪县-泗洪县”, 75 “泰州市-泰州市”, 76 “兴化市-兴化市”, 77 “靖江市-靖江市”, 78 “泰兴市-泰兴市”, 79 “姜堰市-姜堰市”), 80 new Array(“北京-北京”), 81 new Array(“天津-天津”), 82 new Array(“上海-上海”), 83 new Array(“重庆-重庆”), 84 new Array( 85 //”广东省 (全部地区)-广东省 (全部地区)”, 86 “广州-广州”, 87 “深圳-深圳”, 88 “东莞-东莞”, 89 “中山-中山”, 90 “佛山-佛山”, 91 “珠海-珠海”, 92 “惠州-惠州”, 93 “汕头-汕头”, 94 “湛江-湛江”, 95 “潮州-潮州”, 96 “潮阳-潮阳”, 97 “江门-江门”, 98 “汕尾-汕尾”, 99 “茂名-茂名”, 100 “阳江-阳江”, 101 “肇庆-肇庆”, 102 “梅州-梅州”, 103 “云浮-云浮”, 104 “清远-清远”, 105 “韶关-韶关”, 106 “河源-河源”, 107 “揭阳-揭阳”, 108 “其他-其他”), 109 new Array( 110 //”浙江省(全部地区)-浙江省(全部地区)”, 111 “杭州-杭州”, 112 “宁波-宁波”, 113 “温州-温州”, 114 “金华-金华”, 115 “义乌-义乌”, 116 “绍兴-绍兴”, 117 “湖州-湖州”, 118 “余姚-余姚”, 119 “临海-临海”, 120 “萧山-萧山”, 121 “临安-临安”, 122 “诸暨-诸暨”, 123 “嵊泗-嵊泗”, 124 “兰溪-兰溪”, 125 “嘉兴-嘉兴”, 126 “海宁-海宁”, 127 “桐乡-桐乡”, 128 “衢州-衢州”, 129 “上虞-上虞”, 130 “嵊州-嵊州”, 131 “慈溪-慈溪”, 132 “丽水-丽水”, 133 “瓯海-瓯海”, 134 “黄岩-黄岩”, 135 “椒江-椒江”, 136 “其他-其他”), 137 new Array( 138 //”福建省(全部地区)-福建省(全部地区)”, 139 “福州-福州”, 140 “厦门-厦门”, 141 “泉州-泉州”, 142 “漳州-漳州”, 143 “石狮-石狮”, 144 “三明-三明”, 145 “南平-南平”, 146 “莆田-莆田”, 147 “永安-永安”, 148 “邵武-邵武”, 149 “龙岩-龙岩”, 150 “其他-其他”));