<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. epoll相关

    1) 能不能给一个使用epoll相关API进行IO监控的示例?在<<epoll学习笔记>>中有一个简单的示例说明epoll相关API的使用, 但是这个示例是非常简单的, 它仅仅 ...

  2. ie调试控制台

    function initConsole() { var console = document.createElement('div'); console.id = 'errorConsole'; d ...

  3. OpenSSL命令---rsa

    用途: Rsa命令用于处理RSA密钥.格式转换和打印信息.其实其用法和dsa的差不多. 用法: openssl rsa [-inform PEM|NET|DER] [-outform PEM|NET| ...

  4. HTML解决div里面img的缝隙问题

    图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定义容器里的字体大小为0. div ...

  5. gdb调试相关

    GDB调试及其调试脚本的使用返回脚本百事通一.GDB调试 1.1. GDB 概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式的,像VC.BCB等 ...

  6. Introduction to Guid ( globally unique identifier )

    什么是 GUID? 全球唯一标识符 (GUID) 是一个字母数字标识符,用于指示产品的唯一性安装. 在许多流行软件应用程序(例如 Web 浏览器和媒体播放器)中,都使用 GUID. GUID 的格式为 ...

  7. ORA-00031: session marked for kill 标记要终止的会话

    原文转载处:http://moonsoft.itpub.net/post/15182/203828 一些ORACLE中的进程被杀掉后,状态被置为"killed",但是锁定的资源很长 ...

  8. 转：不会定义jQuery插件，不要说会jQuery

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  9. hibernate Criteria查询 2.3

    Criteria对象提供了一种面向对象的方式查询数据库.Criteria对象需要使用Session对象来获得一个Criteria对象表示对一个持久化类的查询 查询所有 Session session ...

  10. Visual Studio 2013 Xamarin for iOS 环境搭建

    原文:Visual Studio 2013 Xamarin for iOS 环境搭建 一.Mac安装Xamarin.iOS 1,我的Mac 环境:OSX 10.10.3.Xcode 6.3.2 (使用 ...