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. rem计算

    //jquery实现 // $(function(){ // $(window).on("resize",function(){ // var width=$(window).wi ...

  2. FAIR开源Detectron：整合全部顶尖目标检测算法

    昨天,Facebook AI 研究院(FAIR)开源了 Detectron,业内最佳水平的目标检测平台. 昨天,Facebook AI 研究院(FAIR)开源了 Detectron,业内最佳水平的目标 ...

  3. python访问互联网

    1.python有一个网络包urllib,里面有很多网络模块,其中我们常用的就是urllib.request (module)这个模块 2.引入要是用的模块:import urllib.request ...

  4. Flume的各种类型的组件介绍

    1.   Source NetCat Source:绑定的端口(tcp.udp),将流经端口的每一个文本行数据作为Event输入: type:source的类型,必须是netcat. bind:要监听 ...

  5. yii学习笔记--url解析

    在通过yiic命令生成了一个app之后,我们通过浏览器访问会看到这样的一个页面.   点击home时,url为:http://localhost/blog/index.php?r=site/index ...

  6. [深度学习] 权重初始化--Weight Initialization

    深度学习中的weight initialization对模型收敛速度和模型质量有重要影响! 在ReLU activation function中推荐使用Xavier Initialization的变种 ...

  7. Map<String, Object>转Object,Object转 Map<String, Object>

    Map转Object import com.alibaba.fastjson.JSON; Map<String, Object> boneAgeOrderMap=boneAgeOrderS ...

  8. RabbitMQ系列（五）使用Docker部署RabbitMQ集群

    概述 本文重点介绍的Docker的使用,以及如何部署RabbitMQ集群,最基础的Docker安装,本文不做过多的描述,读者可以自行度娘. Windows10上Docker的安装 因为本人用的是Win ...

  9. centos7安装Wkhtmltopdf

    从官网下载预编译版安装: wget https://github.com/wkhtmltopdf/wkhtmltopdf/releases/download/0.12.4/wkhtmltox-0.12 ...

  10. YARN集群的mapreduce测试（三）

    将user表.group表.order表关:(类似于多表关联查询) 测试准备: 首先同步时间,然后 开启hdfs集群,开启yarn集群:在本地"/home/hadoop/test/" ...