<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. 如何设计一个 iOS 控件?(iOS 控件完全解析)

    前言 一个控件从外在特征来说,主要是封装这几点: 交互方式 显示样式 数据使用 对外在特征的封装,能让我们在多种环境下达到 PM 对产品的要求,并且提到代码复用率,使维护工作保持在一个相对较小的范围内 ...

  2. asp.net传值

    asp.net页面传至几种方法 Response.Redirect (或称 Query String 方式.URL方式) Response.Redirect("WebForm5.aspx&q ...

  3. 浅谈JDBC（一）

    一.JDBC技术引言 1.什么是JDBC技术 提供了一套接口规范,利用java代码进行数据库操作. 2.JDBC技术的核心思想 对于程序员来说,代码访问数据库分为三个步骤:1.通过数据库的账号密码.2 ...

  4. URAL 1146 Maximum Sum 最大子矩阵和

    题目:click here #include <bits/stdc++.h> using namespace std; typedef unsigned long long ll; con ...

  5. JQuery隔行变色

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. nfs:server is not responding,still trying 原因与解决

    方案(学自他人) nfs:server is not responding,still trying的解决方法 (2009-04-20 10:20) 方法1 : 我在arm上通过NFS共享文件时出现下 ...

  7. cocos2d-x游戏开发系列教程-超级玛丽06-CMGameScene

    背景 在CMMenuScene中,当用户点击开始游戏时,导演让场景进入到CMGameScene 头文件 class CMGameScene : public cocos2d::CCLayer,publ ...

  8. Android之drawable state各个属性具体解释

    我们在定义一个drawable的时候能够通过xml定义的drawable对象.它使得一个图片能在不同的状态下显示不同的图案,比方一个Button,它有pressed.focused,或者其他状态,通过 ...

  9. javascript得知 - js的Date对象函数

    js的Date功能很强大.通常使用. 首先获得当前的日期: var CurDate = new Date(); var Year = CurDate.getFullYear(); //年份(四位 例: ...

  10. iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变

    本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...