1.  <html>
  2.       <head>
  3.       <meta charset="UTF-8">
  4.       <meta name="Generator" content="EditPlus®">
  5.       <meta name="Author" content="">
  6.       <meta name="Keywords" content="">
  7.       <meta name="Description" content="">
  8.       <title>级联效果</title>
  9.       <script>
  10.       var cityList = new Array();
  11.       cityList['北京市'] = ['朝阳区','东城区','西城区', '海淀区','宣武区','丰台区','怀柔','延庆','房山'];
  12.       cityList['上海市'] = ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'];
  13.       cityList['广州省'] = ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'];
  14.       cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
  15.       cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
  16.       cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
  17.       cityList['江苏省'] = ['南京市','苏州市','无锡市'];
  18.       cityList['浙江省'] = ['杭州市','宁波市','温州市'];
  19.       cityList['四川省'] = ['四川省','成都市'];
  20.       cityList['海南省'] = ['海口市'];
  21.       cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
  22.       cityList['山东省'] = ['济南市','青岛市','烟台市'];
  23.       cityList['江西省'] = ['江西省','南昌市'];
  24.       cityList['广西省'] = ['柳州市','南宁市'];
  25.       cityList['安徽省'] = ['安徽省','合肥市'];
  26.       cityList['河北省'] = ['邯郸市','石家庄市'];
  27.       cityList['河南省'] = ['郑州市','洛阳市'];
  28.       cityList['湖北省'] = ['武汉市','宜昌市'];
  29.       cityList['湖南省'] = ['湖南省','长沙市'];
  30.       cityList['陕西省'] = ['陕西省','西安市'];
  31.       cityList['山西省'] = ['山西省','太原市'];
  32.       cityList['黑龙江省'] = ['黑龙江省','哈尔滨市'];
  33.       cityList['其他'] = ['其他'];
  34.  
  35.       function changeCity(){
  36.       //1.得列省份下拉列表的选中值
  37.       var provinceVal = document.getElementById("province").value;
  38.       //2.从表找到它所对应城市列表
  39.       var citysss = cityList[provinceVal];
  40.       //3.清除城市列表中原有的值
  41.       document.getElementById("city").options.length=1;
  42.       //4.遍历城市数组,同时向城市下拉列表中添加option
  43.       for(var i=0;i<citysss.length;i++){
  44.       document.getElementById("city").add(new Option(citysss[i],citysss[i]));
  45.       }
  46.       }
  47.  
  48.       function initProvince(){
  49.       //1.获取省份列表
  50.       var provinceObj = document.getElementById("province");
  51.       //1.for..in循环的作用：用于遍历对象的所有属性
  52.       for(var i in cityList){
  53.       provinceObj.add(new Option(i,i));
  54.       }
  55.       }
  56.  
  57.       window.onload = initProvince;
  58.       </script>
  59.       </head>
  60.  
  61.       <body>
  62.       <select id="province" onchange="changeCity()">
  63.       <option>--请选择省份--</option>
  64.       </select>
  65.  
  66.       <select id="city">
  67.       <option>--请选择城市--</option>
  68.       </select>
  69.  
  70.       </body>
  71.       </html>
  72.

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. ccMacros

    #ifndef __CCMACROS_H__ #define __CCMACROS_H__ #ifndef _USE_MATH_DEFINES #define _USE_MATH_DEFINES #e ...

  2. 积跬步，聚小流------关于UML类图

    UML的存在 类图是使用频率比較高的UML图,它用于描写叙述系统中所含的类以及它们之间的相互关系,帮助人们简化对系统的理解,也是系统分析和设计阶段的重要产物,也是系统编码和測试的重要类型根据. UML ...

  3. poj1144 Network【tarjan求割点】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4319585.html   ---by 墨染之樱花 [题目链接]http://poj.org/p ...

  4. 面试之hack（转载）

    史上最全的CSS hack方式一览 css hack api   做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方 ...

  5. Tomcat7.0.22在Windows下详细配置过程

    Tomcat7.0.22在Windows下详细配置过程 一.JDK1.7安装 1.下载jdk,下载地址:http://www.oracle.com/technetwork/java/javase/do ...

  6. django开发简易博客（三）

    一.静态文件的使用 首先,新建static目录,目录下分别建立css.js.img三个子目录 修改settings.py文件 STATICFILES_DIRS = ( 'F:/web/static', ...

  7. Oracle 如何写出高效的 SQL

    转自:Oracle 如何写出高效的 SQL 要想写出高效的SQL 语句需要掌握一些基本原则,如果你违反了这些原则,一般情况下SQL 的性能将会很差. 1. 减少数据库访问次数连接数据库是非常耗时的,虽 ...

  8. JDBC_获取数据库连接

    <span style="font-size:24px;">package src.com.jdbc.java; import java.io.IOException; ...

  9. 条码的种类(types of barcode)

    条码基本上分为两大类:一维条码(1D Barcode)及二维条码(2D Barcode). 一维条码(1D Barcode) 所谓一维条码,简单的说就是条码只能横向水平方向列印,其缺点是储存的资料量较 ...

  10. 用merge into进行性能优化

    有时候开发组有这么一个需求,一个表和它的备份表,把备份表中的某些字段替换到原表中,当数据量非常大的时候就很很慢,这个时候如果我们用merge into往往会提高几倍的性能,下面我们来做个实验: SQL ...