学习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. 2.1.4　扫描器X-Scan查本机隐患

    X-Scan是由安全焦点开发的一个功能强大的扫描工具.它采用多线程方式对指定IP地址段(或单机)进行安全漏洞检测,支持插件功能. 1.用X-Scan查看本机IP地址 利用X-Scan扫描器来查看本机的 ...

  2. centos下 rpm包sphinx安装成功提示

    sphinx: /etc/sphinx /usr/share/sphinx Sphinx installed! Now create a full-text index, start the sear ...

  3. uva 10252 - Common Permutation 字符串水题

    题意:給定兩個小寫的字串a與b,請印出皆出現在兩字串中的字母,出現的字母由a~z的順序印出,若同字母出現不只一次,請重複印出但不能超過任一字串中出現的次數.(from Ruby兔) 很水,直接比较输出 ...

  4. 设置eclipse在linux下提示

    在Windows下eclipse按alt+/就可以提示,但是在Linux下eclipse的设置不是这样的alt+/为切换输入法,如果要修改于Windows下的一样就需要修改一下快捷键: 点击windo ...

  5. 用Chrome在电脑上模拟微信浏览器

    1.先了解安卓微信和Ios微信的UA(User agent:用户代理) 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus ...

  6. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

  7. 【CSS3】---last-of-type选择器+nth-last-of-type(n)选择器

    last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的,不同的是他选择是父元素下的某个类型的最后一个子元素. 示例演示 通过“:las ...

  8. cocos2dx-lua 批量打包及修改

    coco2dx目前大部分开发者肯定是用lua解决问题,问题来了,每次改一下lua配置可能你每次都得运行 cocos luacompile -p android 针对不同的平台,可能会有某些配置会略有不 ...

  9. JqueryPagination 分页插件使用说明

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了 1 首先引入相关js文件: <lin ...

  10. Cocos2d-JS地图性能问题

    如图所示游戏场景,它是我们以往介绍的实例,在场景中有三个方块精灵(BoxA.BoxB和BoxC)和背景精灵,这个背景叫做“地图”有点牵强,地图采用了有规律的纹理. 游戏场景 那么我们如何设计这个游戏地 ...