<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. CSS3 Transitions属性打造动画的下载按钮特效

    一个网站的下载按钮应尽量吸引读者的注意. 这意味着网页设计师应该非常重视文件的下载界面.一个页面这么多的文件,如图片,视频和插件可以通过直接HTTP下载共享.许多免费网站甚至发布图标集和PSD文件供用 ...

  2. Scala之::的研究

    一个非常细节的问题,简单总结一下.::在Scala里有两种含义.一种是List集合的一个方法,用于把一个元素加入到集合的前面:还有一种表示一个非空的List集合,往往应用于模式匹配中.本文原文出处: ...

  3. [mmc]Linux下MMC/SD/SDIO的识别与操作

    转自:http://blog.csdn.net/skdkjzz/article/details/38927943 我们知道host在扫描卡的过程中,其识别的顺序为SDIO  SD MMC,并且从它的注 ...

  4. 关于Trie树的模板

    Trie树又称单词查找树,Trie树,是一种树形结构.是一种哈希树的变种.典型应用是用于统计.排序和保存大量的字符串(但不仅限于字符串),所以常常被搜索引擎系统用于文本词频统计. 它的长处是:利用字符 ...

  5. Quill + Framework 7 移动端无法获取焦点

    Quill 是一个轻量级的富文本编辑器.最近公司项目中需要用到这个东东.使用方法可以直接查看它的官网地址或者Github地址: Github地址:quilljs 官网地址:quill官网 主要说一下用 ...

  6. js学习笔记28----事件默认行为

    事件默认行为 : 当一个事件发生的时候浏览器自己会默认做的事情.   怎么阻止? 当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;   右键菜单事件 oncont ...

  7. r语言与dataframe

    什么是DataFrame 引用 r-tutor上的定义: DataFrame 是一个表格或者类似二维数组的结构,它的各行表示一个实例,各列表示一个变量. 没错,DataFrame就是类似于Excel表 ...

  8. WebForm和MVC的一些知识（转）

    转自:http://www.cnblogs.com/liuhf939/p/3417203.html 比较WebForm和Mvc的请求处理方式 首先简单了解一下Asp.Net中怎么对页面进行请求处理的: ...

  9. 【转】C# 二维码生成

    /// <summary> /// 含有QR码的描述类和包装编码和渲染 /// </summary> public class QRCodeHelper { /// <s ...

  10. windows 批处理文件中引用日期

    参见:http://blog.csdn.net/iw1210/article/details/39313677 %DATE%输出的是: yyyy/mm/dd 星期* (例如:2008/12/18 星期 ...