<html>
      <head>
      <meta charset="UTF-8">
      <meta name="Generator" content="EditPlus®">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <title>级联效果</title>
      <script>
      var cityList = new Array();
      cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
      cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
      cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
      cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
      cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
      cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
      cityList['江苏省'] = ['南京市','苏州市','无锡市'];
      cityList['浙江省'] = ['杭州市','宁波市','温州市'];
      cityList['四川省'] = ['四川省','成都市'];
      cityList['海南省'] = ['海口市'];
      cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
      cityList['山东省'] = ['济南市','青岛市','烟台市'];
      cityList['江西省'] = ['江西省','南昌市'];
      cityList['广西省'] = ['柳州市','南宁市'];
      cityList['安徽省'] = ['安徽省','合肥市'];
      cityList['河北省'] = ['邯郸市','石家庄市'];
      cityList['河南省'] = ['郑州市','洛阳市'];
      cityList['湖北省'] = ['武汉市','宜昌市'];
      cityList['湖南省'] = ['湖南省','长沙市'];
      cityList['陕西省'] = ['陕西省','西安市'];
      cityList['山西省'] = ['山西省','太原市'];
      cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
      cityList['其他'] = ['其他'];

      function changeCity(){
      //1.得列省份下拉列表的选中值
      var provinceVal = document.getElementById("province").value;
      //2.从表找到它所对应城市列表
      var citysss = cityList[provinceVal];
      //3.清除城市列表中原有的值
      document.getElementById("city").options.length=1;
      //4.遍历城市数组,同时向城市下拉列表中添加option
      for(var i=0;i<citysss.length;i++){
      document.getElementById("city").add(new Option(citysss[i],citysss[i]));
      }
      }

      function initProvince(){
      //1.获取省份列表
      var provinceObj = document.getElementById("province");
      //1.for..in循环的作用：用于遍历对象的所有属性
      for(var i in cityList){
      provinceObj.add(new Option(i,i));
      }
      }

      window.onload = initProvince;
      </script>
      </head>

      <body>
      <select id="province" onchange="changeCity()">
      <option>--请选择省份--</option>
      </select>

      <select id="city">
      <option>--请选择城市--</option>
      </select>

      </body>
      </html>

JavaScript DOM省市自适配select菜单的更多相关文章

  1. javascript实现select菜单／级联菜单（用Rails.ajax实现发送请求，接收响应）

    在购物网站,填写收货地址的时候,会出现XX省XX市XX区的下拉菜单,如何实现此功能?思路是什么? 功能设置: 当选择省select菜单后,市的select菜单为这个省的城市列. 当选择市菜单后,区菜单 ...

  2. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

  3. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  4. javascript Dom 编程

     javascript Dom  编程 知识概要: (1)Dom是什么? (2)Dom结构模型 (3)XML DOM和 HTML DOM (4)NODE接口的特性和方法 (5)DOM结点的常用属性 ...

  5. Javascript + Dom知识点总结

    Javascript + Dom知识点总结 1．用Javascript声明数组和字典的方式 // 数组声明 var arr = new Array(); arr["0"] = &q ...

  6. 前端基础：JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  7. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  8. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  9. javascript DOM对象转jquery对象

    首先,假设一种情形:要在HTML文件中为一个select对象添加一个函数,这个函数的名字叫dynamic_change(this),当select的option被改变的时候调用onchange事件来处 ...

随机推荐

  1. 解决外贸电商难题，PayPal中国外贸电商大会圆满礼成

        在全球经济一体化的背景下,越来越多的中国企业将目光转移到了海外.对中国的企业而言,要想将生意做到海外大致有两种方法可供选择,一是到海外设立分支机构或者分公司,二是通过外贸电子商务平台实现交易. ...

  2. 用ToggleButton和ImageView实现不同状态下显示的切换

    靠,写的时候第一次因为把implements OnCheckedChangeListener这里实现的接口写错了,搞了很久, 后来发现又少了这两句错了 btn = (ToggleButton) fin ...

  3. Request.ServerVariables["Url"]

    Request.ServerVariables["Url"] 返回服务器地址 Request.ServerVariables["Path_Info"] 客户端提 ...

  4. C#常用控件缩写

  5. Excel连接到MySQL，将Excel数据导入MySql，MySQL for Excel，，

    Excel连接到MySQL 即使当今时代我们拥有了类似微软水晶报表之类的强大报表工具和其他一些灵活的客户管 理应用工具,众多企业在分析诸如销售统计和收入信息的时候,微软的Excel依然是最常用的工具. ...

  6. Redhat 5.8系统安装R语言作Arima模型预测

    请见Github博客:http://wuxichen.github.io/Myblog/timeseries/2014/09/02/RJavaonLinux.html

  7. Lync 2010升级到Lync 2013POC计划-过程！

    最近在协助一家客户做升级项目调研,目前处在POC过程中,根据他们的需求我们将整个POC过程用Project 进行了下整理,了解整个项目中可能存在的风险和相应的计划过程,根据相应的计划我们能够将相应过程 ...

  8. (step4.2.1) hdu 1372(Knight Moves——BFS)

    解题思路:BFS 1)马的跳跃方向 在国际象棋的棋盘上,一匹马共有8个可能的跳跃方向,如图1所示,按顺时针分别记为1~8,设置一组坐标增量来描述这8个方向: 2)基本过程 设当前点(i,j),方向k, ...

  9. UVA 1619 Feel Good（DP)

    Bill is developing a new mathematical theory for human emotions. His recent investigations are dedic ...

  10. java的数据类型，几个java小程序

    1:求圆的面积 还好看了c++,不然直接看这课件还真是看不懂……加油吧 要从键盘读入数据可以用Scanner类的nextlnt()或者nextDouble()方法,首先创建Scanner类的一个实例, ...