<body>

<section>

    <a>省份</a>

    <select id="province">

        <option value="0">--请选择--</option>

        <option value="1">山东</option>   //通过不同的value来区分不同的省份

        <option value="2">山西</option>

    </select>

    <a>城市</a>

    <select id="city">

       <option>--请选择--</option>

    </select>

</section>

</body>

<script>

    var arr = new Array();

    arr[1] = ["莱芜","济南","东营"];

    arr[2] = ["长治","太原","壶关"];

        var provinceInput = document.getElementById("province");  //获取省份

        var cityInput = document.getElementById("city");   //获取市

        provinceInput.onchange = function () {

            cityInput.options.length = 1;//当省改变的时候让市的长度为1

            for(var i = 0;i < arr[provinceInput.value].length;i++) {

                cityInput.add(new Option(arr[provinceInput.value][i]));  //向市里面添加对应的数组元素

            }

    }

</script>

js二级联动的更多相关文章

  1. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  2. Ext.js二级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link href ...

  3. js 二级联动

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  5. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  6. JS实现下拉单的二级联动

    因工作需要,做了一个下拉单的二级联动. 第一级是固定的选项,有A.B两个选项,第二级的选项随着第一级选项的变化而变化. 一开始是这样的: HTML代码 <html> <head> ...

  7. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  8. js：二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  9. js小例子之二级联动

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. iOS cocopods安装使用和安装过程中遇到的问题及解决办法

    在osx 10.11之前cocopods问题不多,但是升级到11之后的版本,之前的cocopods大多用不了,需要重新安装,对于我这种使用测试版系统的技术狂来说,每次都需要重新安装很多东西, 当然,c ...

  2. matlab与MFC

    混合编程其实不难,关键是没有一个规范的,真正可以解决设置过程中出现的小问题的方法.我在设置的过程中,遇到了不少问题,花了多半天的时间,终于解决了,顺利地在vc中调用matlab 生成的dll文件中的函 ...

  3. 非分离线程未使用join函数例子：

    //非分离线程未使用join函数例子: #include<stdlib.h> #include<pthread.h> #include<stdio.h> #incl ...

  4. 部署zookeeper集群

    1.把zookeeper.tar.gz解压之后,移动到/usr目录下 2.首先要给zookeeper之间的每个节点的ssh设置无密码登陆 3.在zookeeper目录下编辑zoo.cfg,复制zoo_ ...

  5. C++中声明与定义的区别

    如果是指变量的声明和定义: 从编译原理上来说,声明是仅仅告诉编译器,有个某类型的变量会被使用,但是编译器并不会为它分配任何内存.而 定义就是分配了内存.对于下面的两句代码:void Func(){in ...

  6. SQLServer 跨库查询实现方法

    不使用链接的服务器名,而提供特殊的连接信息,并将其作为四部分对象名的一部分 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Serve ...

  7. python with妙用

    class aa(): def bb(self): print("hhhh") return "hello world" def __enter__(self) ...

  8. jQuery数组处理详解(转)

    1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两 ...

  9. TaintDroid下载预编译（五）：TaintDroid（Android）系统编译虚拟机和真机測试

    光说不练非好汉,如今就让我们开启自己编译的系统測试!事实上懂得这些过程.就知道了Android手机系统定制的整个流程.现有的智能机都是使用Google的android开源的系统然后加入一些自己的东西. ...

  10. Jquery实现选项卡功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...