<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. 彻底解决：Keil编译提示“File has been changed outside the editor, reload?”提示！

    如图所示,很多同学在使用keil时都可能会碰到上图中的“File has been changed outside the editor, reload?”提示,很令人烦心.当遇到此提示,首先不要郁闷 ...

  2. python命令行参数处理

    使用argparse包来解析命令行参数: #/usr/bin/python #encoding=utf-8 import argparse parser = argparse.ArgumentPars ...

  3. 【Linux命令】查找命令

    如果你想在当前目录下 查找"hello,world!"字符串,可以这样: grep -rn "hello,world!" *

  4. BZOJ 1579: [Usaco2009 Feb]Revamping Trails 道路升级( 最短路 )

    最短路...多加一维表示更新了多少条路 -------------------------------------------------------------------------------- ...

  5. 深入浅出—JAVA(3)

    3.认识变量 变量有两种:primitive主数据类型和引用. 变量有两种口味:清凉的primitive主数据类型与香辣的对象引用.primitive主数据类型用来保存基本类型的值,包括整数.布尔和浮 ...

  6. Gsoap 使用心得 2

                                         Gsoap 返回图片byte的困惑 前些日子刚使用gsoap将二进制文件上传(服务期端使用c# wcf 编写),上传功能实现没 ...

  7. Mono for Android 显示远程图片

    Main.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  8. NET Core，跨平台的轻量级RPC

    NET Core,跨平台的轻量级RPC:Rabbit.Rpc 特性一览 Apache License 2.0协议开源 支持客户端负载均衡(提供了轮询.随机算法的实现) 支持ZooKeeper和文件共享 ...

  9. iOS SDK：预览和打开文档

    iOS中的沙盒可以让平台更加的安全,这也是沙盒给用户带来的最主要好处.不过由于沙盒的严格限制,导致程序之间共享数据比较麻烦.一般在程序间共享文档可以通过UIDocumentInteractionCon ...

  10. 用200行Python代码“换脸”

    介绍 本文将介绍如何编写一个只有200行的Python脚本,为两张肖像照上人物的“换脸”. 这个过程可分为四步: 检测面部标记. 旋转.缩放和转换第二张图像,使之与第一张图像相适应. 调整第二张图像的 ...