学习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. （Android学习系列）一，用按钮实现时间的显示

    我们先用AndroidStudio新建一个项目,选择空白模板,然后像其中拖入两个Button,将他们的id分别命名为btDate(显示日期),btTime(显示时间),他的模板XML代码很简单 < ...

  2. iOS UITableView的一些方法

    项目中用到的一些tabview 问题及对应方法: 一.tableview 1.下划线左对齐 //步骤一:(加在 viewdidload方法中) if([tabView respondsToSelect ...

  3. nginx设置SSL反向代理

    Nginx的反向代理通常用来映射内网中提供的Apache.IIS.Lighttpd服务,以实现负载均衡:同时,由于动态服务程序运行在内网,服务器的整体安全性也有所提高,那么怎样用nginx设置SSL的 ...

  4. ubuntu 换源

    经过自己一番折腾后,发现用这个方法换源最简单.直接. sudo vi /etc/apt/sources.list 把sources.list里面的内容全部替换为一下内容 deb http://mirr ...

  5. Oracle基础 物理备份 冷备份和热备份（转）

    一.冷备份介绍:    冷备份数据库是将数据库关闭之后备份所有的关键性文件包括数据文件.控制文件.联机REDO LOG文件,将其拷贝到另外的位置.此外冷备份也可以包含对参数文件和口令文件的备份,但是这 ...

  6. MongoDB - The mongo Shell, Configure the mongo Shell

    Customize the Prompt You may modify the content of the prompt by setting the variable prompt in the  ...

  7. 关于asp.net MVC 中的TryUpdateModel方法

    有比较才会有收货,有需求才会发现更多. 在传统的WebFormk开发工作中,我们常常会存在如下的代码块 //保存 protected void btnSubmit_Click(object sende ...

  8. C#_字符串的操作

    1: using System; 2: using System.Collections.Generic; 3: using System.Linq; 4: using System.Text; 5: ...

  9. Git之使用

    一大清早的,正在熟睡的我竟然被冻醒了,这天好冷啊,没事就先来扯一下犊子吧:我发现我养成了一个“怪”习惯:我老是一大早起来打开电脑就撸代码,到了中午和下午就去干别的事不想敲了.我们寝室的宿友总是被我敲代 ...

  10. 运行第一个Node.js程序

    初学Node.js,萌新一枚.感觉Node.js挺不错的,从基础开始一步一步来,加油吧! 我们来使用Node.js的express来运行第一个程序helloworld: 在命令提示符键入express ...