<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. Linux 网络子系统之网络协议接口层（一）

    Linux 网络设备驱动之网络协议接口层介绍. 网络协议接口层最主要的功能是给上层协议提供透明的数据包发送和接收接口. 当上层ARP或IP需要发送数据包时,它将调用网络协议接口层的dev_queue_ ...

  2. Log4j 2使用教程<转>

    Log4j 2的好处就不和大家说了,如果你搜了2,说明你对他已经有一定的了解,并且想用它,所以这里直接就上手了. 1. 去官方下载log4j 2,导入jar包,基本上你只需要导入下面两个jar包就可以 ...

  3. java TreeMap 源代码分析 平衡二叉树

    TreeMap 的实现就是红黑树数据结构,也就说是一棵自平衡的排序二叉树,这样就可以保证当需要快速检索指定节点. TreeSet 和 TreeMap 的关系 为了让大家了解 TreeMap 和 Tre ...

  4. Hive UDF IP解析（一）：依赖包兼容性问题

    Java依赖环境: <dependency> <groupId>org.apache.hive</groupId> <artifactId>hive-e ...

  5. tomcat7项目启动报错java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory

     报这个错说明用的是tomcat7 打开myeclipse,Preferentces->MyEclipse->Servers->Tomcat->Tomcat 6.x ,载入 ...

  6. 不可错过的10个超棒jQuery表单操作代码片段

    jQuery 绝对是一个伟大的开源javascript类库,是帮助我们快速和高效开发前端应用的利器.可能大家在日常的开发过程中常常会处理表单相关的 javascript,在今天这篇代码片段分享文章中, ...

  7. 【MySQL】MySQL 常用语法之锁表与解锁表

    mysql 锁表语句: Lock锁整张表: 写锁定: LOCK TABLES products WRITE: 写锁,锁定之后,只有当前线程可以进行读操作和写操作,其他线程读操作和写操作均被堵塞.... ...

  8. Qt Creater中Clang-format的使用

    起因在于习惯性的想格式化代码,发现Qt Creater默认居然是没有代码格式化的,只有一个缩进,搞毛线啊!!! 搜索了下,倒是很容易就搜到了,Qt Creater中有个插件:beautifier,在 ...

  9. 第三百一十七节，Django框架，缓存

    第三百一十七节,Django框架,缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返 ...

  10. 基本上每个应用程序领域的程序员都有使用 C++

    C++ 的使用基本上每个应用程序领域的程序员都有使用 C++. C++ 通常用于编写设备驱动程序和其他要求实时性的直接操作硬件的软件. C++ 广泛用于教学和研究. 任何一个使用苹果电脑或 Windo ...