夏日博客

A-A+

js实现城市级联选择实现代码

2016年01月28日 前端设计 暂无评论 阅读 10 views 次

联动菜单是我们开发中常用到的一个实例，像城市联动，二级菜单等等都会用到，下面我以城市联动为实例来介绍js级联选择效果。

代码实例:以下代码可以直接粘贴使用,但里面的城市并不完整.

实现原理是利用 js的onchang方法，调用city.js文件里的changecity()函数，var text = city[index][i].split(“-”); 这个方法是把new Array()数组拆分进text变量数组里，然后text[0]是文本区域中的值，text[1]是选中的值,代码如下:

  1. <script language=”javascript” src=”city.js”></script>  
  2. <form action=”" method=”post” name=”form2″>省份：<select name=”sf”  onchange=”changecity()” >  
  3.                 <option selected>选择省份</option>  
  4.                 <option value=”江苏省”>江苏省</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></select>  
  12.      　城市：  
  13.               <SELECT name=city style=”width:80″>  
  14.                 <OPTION>==所在城市==</OPTION>  
  15.               </SELECT>  
  16.  </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.       “其他-其他”));  
标签：

给我留言