学习javascript的时候都遇到过这样的需求，不仅是省市，还有其他的一些场景，看看关键的代码有哪些吧。

 <head runat="server">

     <title>省市级联效果</title>

     <script type="text/javascript">

         var cityList = [{ "province": "四川省", "city": ["成都", "内江", "绵阳", "眉山", "自贡"] },

         { "province": "山东省", "city": ["济南", "青岛", "德州", "淄博", "泰安", "菏泽", "临沂"] },

         { "province": "浙江省", "city": ["杭州", "金华", "绍兴", "温州", "衢州"] },

          { "province": "海南省", "city": ["海口", "三亚", "儋州", "东方", "五指山"] }, ];

          window.onload = function () {

              var province = document.getElementById("province");

              //绑定事件

              province.onchange = selectCity;

          };

         function selectCity() {

             //城市

             var city = document.getElementById("city");

             //先清空数据

             if (city != null) {

                 city.options.length = 0;

             }

             //省份

             var province = document.getElementById("province");

             //获取选中省份的索引

             var provinceSelectedIndex = province.selectedIndex;

             //获取选中省份的项

             var provinceSelectedOption = province.options[provinceSelectedIndex];

             //遍历城市列表

             for (var i = 0; i < cityList.length; i++) {

                 if (cityList[i].province == provinceSelectedOption.innerText) {

                     for (var j = 0; j < cityList[i].city.length; j++) {

                         //创建节点

                         var optionNew = document.createElement("option");

                         //为节点属性赋值

                         optionNew.innerText = cityList[i].city[j];

                         //添加节点

                         city.appendChild(optionNew);

                     }

                 }

             }

         }

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         <select id="province" style="width: 200px;">

             <option selected="selected">--请选择--</option>

             <option>四川省</option>

             <option>山东省</option>

             <option>浙江省</option>

             <option>海南省</option>

         </select>

         <select id="city" style="width: 200px;">

         </select>

     </div>

     </form>

 </body>

效果图：

2015年2月2日，改成代码版，原来是图片版。

javascript中的省市级联效果的更多相关文章

  1. JavaScript学习笔记- 省市级联效果

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. JavaScript 省市级联效果

    JavaScript 省市级联效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. JavaScript实现省市级联效果实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  5. javascript中全屏滑动效果实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 用JavaScript中jQuery编写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 省市级联.net

    初学javascript,编译省市级联,使用json在一般处理程序中编译,利用ajax传递数据到web前台 <html xmlns="http://www.w3.org/1999/xh ...

  8. 利用arguments对象在javaScript中实现重载（overload）

    一些概念: 重载(overload): 什么是: 相同函数名,不同参数列表的多个函数,在调用时,可根据传入参数的不同,自动选择对应的函数调用! 为什么: 减轻调用者的负担,一个函数名,可执行多种操作 ...

  9. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Linux系统cpu 100%修复案例

    Linux系统cpu 100%修复案例 ​阿里云技术支持团队:完颜镇江 案例背景: Linux主机连续三天CPU% 处理思路: 1.  登录服务器查看/var/log/messages+/var/lo ...

  2. 【Linux/Ubuntu学习5】Ubuntu 下android 开发，eclipse不能识别手机

    ubuntu下eclipse不能识别手机解决方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 1) 在终端运行 lsusb 会发现结果 ...

  3. Gstreamer基本概念介绍（开发前必读）

    1. 元件(Elements) 元件(element)是GStreamer中最重要的概念.你可以通过创建一系列的元件(Elements),并把它们连接起来,从而让数据流在这个被连接的各个元件(Elem ...

  4. 剑指Offer12 数组奇数调整至偶数前

    /************************************************************************* > File Name: 12_Reorde ...

  5. 转：MediaCoder H.264格式编码参数设置及详解

    转: http://mediacoder.com.cn/node/81 由于现在大部分视频转码都选择H.264格式进行编码,同时CUDA编码的画质还达不到x264软编码的质量(如果你对画质无要求,可以 ...

  6. 物联网 WIFI 一键配置原理（smartconfig) ESP8266/QCA4004

    自从物联网 问世以来,如何使得物  能够联网 有了很多的方式,目前运用非常广的WIFI,今天就总结下自这个方面,也对于有需要的盆友 也希望有抛砖引玉之效果. 物联网:  智能硬件+APP+云 APP ...

  7. 解决 arcGis android TextSymbol乱码的问题

    不论是Arcgis for Android的哪个版本,都没无法解决中文乱码的问题,这个与Android中自带的字体库有关,可以参考这篇文章. 所以,要在Arcgis for Android中显示中文, ...

  8. part 5 Two way databinding in AngularJS

  9. ssh-key 与 git账户配置以及多账户配置

    http://www.cnblogs.com/dubaokun/p/3550870.html 在使用git的时候,git与远程服务器是一般通过ssh传输的(也支持ftp,https),我们在管理远程分 ...

  10. php 读写xml 修改xml

    需要修改的xml <?xml version="1.0"?> <config> <administration> <adminuser&g ...