<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. 关于Unity树形插件Tree View Control的相关搜集

    博客http://blog.csdn.net/qq_15267341/article/details/51997926      的这个   Script Based Runtime Tree-Vie ...

  2. [systemd]How To Use Systemctl to Manage Systemd Services and Units

    转自: https://www.digitalocean.com/community/tutorials/how-to-use-systemctl-to-manage-systemd-services ...

  3. 碰到故障大全---cd

    office已安装32位,无法安装64位?解决方案:开始→运行→输入regedit,打开注册表编辑器,找到HKEY_CLASSES_ROOT\\Installer\\Products\ \000021 ...

  4. Window 2008 R2组策略之一——组策略管理控制台

    组策略管理在windows域管理中占有重要地位,本身也不是新的内容了.但微软在Windows2008中终于集成了一个非常好用的组策略管理工具——组策略管理控制台.并且为原有的组策略添加了新的元素.本文 ...

  5. 一站式学习Wireshark（一）：Wireshark基本用法

    按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接 ...

  6. oozie中调度mapreduce

    mapreduce可以直接对hdfs进行清洗和计算,这里介绍oozie中如何调度使用. 操作步骤如下: 1. 写一个mapper和reduce类,并且打包成jar包 2. 在workflow中引用ma ...

  7. 当数据库的字段为date类型时候

    当数据库的字段为date类型时候: //--------------------------------------------------数据库设计------------------------- ...

  8. [oracle] 重要服务启动与停止命令行

    ① 控制台服务[em control] 启动:emctl start dbconsole 停止:emctl stop dbconsole ② 监听器服务[listener control] 启动:ls ...

  9. android 内存管理机制、异常、垃圾回收

    当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能够在第一时间得到响应. 当系统内存不足时,系统将激活内存 ...

  10. C++ 中的空格

    C++ 中的空格只包含空格的行,被称为空白行,可能带有注释,C++ 编译器会完全忽略它. 在 C++ 中,空格用于描述空白符.制表符.换行符和注释.空格分隔语句的各个部分,让编译器能识别语句中的某个元 ...