zoukankan      html  css  js  c++  java
  • 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       “其他-其他”));
  • 相关阅读:
    linux -- 部署java服务器(3) linux安装redis
    linux 安装php8
    linux mysql查看日志
    linux mysql常用的命令
    perl heredoc
    perl数值进制
    提问的智慧
    How to ask question the smart way
    PERL命令行
    图灵/异步图书
  • 原文地址:https://www.cnblogs.com/leejersey/p/2829768.html
Copyright © 2011-2022 走看看