onchange 事件

<body>

    <select id="province" onchange="func1()">

        <option value="shandong">山东</option>

        <option value="hebei">河北</option>

        <option value="beijing">北京</option>

    </select>

</body>

<script>

    function func1(){

        var pro = document.getElementById("province");

        console.log(pro.value)

    }

</script>

使用字典方式添加数据

一级数据显示

<body>

    <select id="province" >

    </select>

</body>

<script>

    data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};

    var pro = document.getElementById("province");

    for (var i in data){

        var option_pro = document.createElement("option");

        option_pro.innerHTML=i;

        pro.appendChild(option_pro);

    }

</script>

二级数据联动 方式一

<body>

    <select id="province" onchange="func1(this)" >

    </select>

    <select id="city"></select>

</body>

<script>

    data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};

    var pro  = document.getElementById("province");

    var city = document.getElementById("city");

    for (var i in data){

        var option_pro = document.createElement("option");

        option_pro.innerHTML=i;

        pro.appendChild(option_pro);

    }

    function func1(self){

        //console.log((self.options[self.selectedIndex]).innerHTML);

        var choice = (self.options[self.selectedIndex]).innerHTML;

        var options = city.children;

        for (var k=0; k<options.length; k++){

            city.removeChild(options[k--]);

        }

        for (var i in data[choice]){

            var option_city = document.createElement("option");

            option_city.innerHTML = data[choice][i];

            city.appendChild(option_city);

        }

    }

</script>

二级数据联动 方式二

<body>

    <select id="province" onchange="func1(this)" >

    </select>

    <select id="city"></select>

</body>

<script>

    data = {"广东省":["广州","佛山"],"北京":["海淀","廊坊"], "海南省":["三亚","海口"]};

    var pro  = document.getElementById("province");

    var city = document.getElementById("city");

    for (var i in data){

        var option_pro = document.createElement("option");

        option_pro.innerHTML=i;

        pro.appendChild(option_pro);

    }

    function func1(self){

        //console.log((self.options[self.selectedIndex]).innerHTML);

        var choice = (self.options[self.selectedIndex]).innerHTML;

        city.options.length=0;

        for (var i in data[choice]){

            var option_city = document.createElement("option");

            option_city.innerHTML = data[choice][i];

            city.appendChild(option_city);

        }

    }

</script>

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

  1. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. js：二级联动示例

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

  3. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  4. 原生js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  5. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  6. js省市二级联动

    html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...

  7. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  8. 原生js二级联动

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

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

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

随机推荐

  1. Java核心技术卷一基础知识-第12章-泛型程序设计-读书笔记

    第12章 泛型程序设计 本章内容: * 为什么要使用泛型程序设计 * 定义简单泛型类 * 泛型方法 * 类型变量的限定 * 泛型代码和虚拟机 * 约束与局限性 * 泛型类型的继承规则 * 通配符类型 ...

  2. 第84节：Java中的网络编程（中）

    第84节:Java中的网络编程(中) 实现客户端和服务端的通信: 客户端需要的操作,创建socket,明确地址和端口,进行键盘录入,获取需要的数据,然后将录入的数据发送给服务端,为socket输出流, ...

  3. Spark基础-scala学习（八、隐式转换与隐式参数）

    大纲 隐式转换 使用隐式转换加强现有类型 导入隐式转换函数 隐式转换的发生时机 隐式参数 隐式转换 要实现隐式转换,只要程序可见的范围内定义隐式转换函数即可.Scala会自动使用隐式转换函数.隐式转换 ...

  4. Linux — 文件、目录管理

    目录与路径 .  此层目录 .. 上层目录 -  之前一个工作目录 ~ 主文件夹 ~ account 指定用户的主文件夹,account --账号名称 cd 切换目录 pwd (print worki ...

  5. Oracle递归查询start with connect by prior

    一.基本语法 connect by递归查询基本语法是: select 1 from 表格 start with ... connect by prior id = pId start with:表示以 ...

  6. ionic3项目 出现 No provider for ApplicationInitStatus!

    出现No provider for ApplicationInitStatus!原因是在app.module.ts文件忘记导入BrowserModule导致的,打开app.module.ts文件添加以 ...

  7. C++版 - 剑指offer 面试题63：二叉搜索树的第k个结点(二叉树中序遍历的应用) 题解

    面试题 63:二叉搜索树的第k个结点 题目:给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 (见下面的图1) 中,按结点数值大小顺序第三个结点的值 ...

  8. C++版 - 剑指offer 面试题24：二叉搜索树BST的后序遍历序列(的判断) 题解

    剑指offer 面试题24:二叉搜索树的后序遍历序列(的判断) 题目:输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则返回true.否则返回false.假设输入的数组的任意两个 ...

  9. java jar 后台运行

    nohup java -jar $APP_NAME.jar >/dev/null &

  10. 【EF6学习笔记】（十二）EF高级应用场景

    本篇原文链接:Advanced Entity Framework Scenarios 本篇主要讲一些使用Code First建立ASP.NET WEB应用的时候除了基础的方式以外的一些扩展方式方法: ...