<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. JavaScript高级 面向对象（9）--深拷贝代码实现

    说明(2017.4.1): 1. 深拷贝要把对象里的“方法”也复制一份出来,“方法”里的“方法和属性”再判断深浅进行拷贝. 2. 办法就是写一个函数deepCopy,里面判断深浅拷贝,然后每个对象都添 ...

  2. 3DES加密算法32个字节

    简介 最近开发的一个项目,使用到了3DES加密算法,加密socket服务端和客户端通信的报文,因为加密秘钥是32个字节,结果折腾了一番,现在记录下来分享! 1.Des3EncryptUtils.jav ...

  3. Excel最多可存多少行，多少列？

    查到的资料如下: Excel 07-2003一个工作表最多可有65536行,行用数字1—65536表示;最多可有256列,列用英文字母A—Z,AA—AZ,BA—BZ,……,IA—IV表示:一个工作簿中 ...

  4. VS2008 express + opencv配置

    刚开始接触opencv,不是很熟悉,配置过程主要参考了这篇博客,大家可以去看看 http://www.cnblogs.com/micky-zhou/archive/2012/08/06/2624433 ...

  5. C 程序的存储空间记录

    一直以来,我们只是单纯的去运行执行 C 程序,并没有关心这个可执行文件里面包含着什么东西. 参考UNIX 环境高级编程 7.6,记录C程序的存储空间布局. C程序由 正文段,初始化数据段,非初始化数据 ...

  6. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  7. Java LinkedHashMap工作原理及实现

    Java LinkedHashMap工作原理及实现 原文出处: Yikun 1. 概述 在理解了#7 介绍的HashMap后,我们来学习LinkedHashMap的工作原理及实现.首先还是类似的,我们 ...

  8. 简单又好用的聊天室技术——WebSocket

    现在,很多网站为了实现推送技术,所用的技术都是轮询.轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器.这种传统的模式带来很 ...

  9. jquery打造一款侧边弹出的垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是在线demo HTML源码: 1 2 ...

  10. LoadRunner性能分析指标解释

    Transactions(用户事务分析) 用户事务分析是站在用户角度进行的基础性能分析. 1.Transation Sunmmary(事务综述) 对事务进行综合分析是性能分析的第一步,通过分析测试时间 ...