<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. ExtJS中form提交之后获取返回的json值

    simpleForm.form.doAction('submit', { url : 'editUserType', method : 'post', params : '', // 提交成功后执行s ...

  2. 通过SqlHelper实现登录

    1.建立解决方案:. 首先创建windows窗体应用程序,然后拖出登录界面 2. 写配置文件App.config:     <configuration>         <conn ...

  3. 初学MVC

    学习MVC基础:C#. ADO.NET .html.javascript.ASP.Net .WebFrom MVC模式两种理解:一种是表现模式,另一种是架构模式.它将应用程序分成三个主要的组件:视图( ...

  4. 两种方式在Tableau Desktop 中创建子弹图(Bullet Chart)

    子弹图,顾名思义是由于该类信息图的样子很想子弹射出后带出的轨道.起初,子弹图的发展是为了取代仪表盘上常见的那种里程表,时速表等基于圆形的信息表达方式.子弹图无修饰的线性表达方式使我们能够在狭小的空间中 ...

  5. Codeforces 18C C. Stripe

    Codeforces 18C  C. Stripe 链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=86640#problem/E 题 ...

  6. Windows最常用的几个网络CMD命令总结

    Windows最常用的几个网络CMD命令总结 http://www.cnblogs.com/sbaicl/archive/2013/03/05/2944001.html 一.ping 主要是测试本机T ...

  7. awk参数详解

    wk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理,然后输出 awk命令形式: awk [-F| ...

  8. js获取select默认选中的Option （非当前选中值）

    js函数方法: <script> function getDefaultSelectedOption(selectId, valIfNull) { var selectId = selec ...

  9. Mac上使用Visual Studio Code开发/调试.NET Core代码

    Mac上使用Visual Studio Code开发/调试.NET Core代码 .Net Core 1.0终于发布了,Core的一大卖点就是跨平台.这个跨平台不只是跨平台运行,而且可以跨平台开发.今 ...

  10. android listview需要呈现多个布局

    android listview需要呈现多个布局 之前的做法很笨 在getView()方法里面,不仅将viewHolder作为tag属性设置给convertView 还将当前的position作为ta ...