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=”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       “其他-其他”));
原文地址:https://www.cnblogs.com/leejersey/p/2829768.html