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. 双十一福利，阿里云1核2G一年最低只要99

    活动期间,新用户可任选1款购买,限购1台,拼团后团内每增加1名新购用户,全团再享10%优惠 (50%封顶),买贵返差 又是只给新用户的福利,比上次的699一年的活动要差一点.如果之前注册了没下手的用户 ...

  2. 配置IDM不限速下载百度云的大文件

    IDM介绍Internet Download Manager(简称IDM)是一个用于Windows系统的下载管理器,它是共享软件,免费试用期为30天,但是每月均有一段时间优惠. IDM可以让用户自动下 ...

  3. eclipse如何使用log4j详解，你get了吗？？？

    1.下载log4j    jar包 log4j下载地址 http://logging.apache.org/log4j/2.x/download.html 2.log4j   jar包引入项目 接下来 ...

  4. ubuntu 16.04 安装cuda的方法

    很多神经网络架构都需要安装CUDA,安装这个的确费了我不少时间,是要总结一下流程了. 安装这个,最好使用官网的安装步骤和流程,不然,会走很多弯路: https://developer.nvidia.c ...

  5. Ajax 提交 数据含特殊字符 出现500错误

    Ajax 请求API接口 传输过去的数据 含有特殊字符,Ajax请求失败出现500错误. 假设你要post过去的数据为 :data  ==>>  {a:'!@!@!@!@#$#{}|> ...

  6. java提高（6）---Serializable

    Serializable--初解 一 序列化是干什么的? 我们知道,在jvm中引用数据类型存在于栈中,而new创建出的对象存在于堆中.如果电脑断电那么存在于内存中的对象就会丢失.那么有没有方法将对象保 ...

  7. java提高（3）---正则表达式（2）

    正则表达式 说真的正则表达式真不好写,当我收集资料准备开始写的时候,发现收集的东西越来越多范围也越来越广,我文章的前提就是文章要清晰, 在缕清自己思路之后,我从先简后难的方式来写有关正表达式,你们如果 ...

  8. State状态模式

    1.简介 在日常开发中,某些对象的状态如果发生改变,对应的行为也将发生改变,那么如何在运行时根据对象的状态动态的改变对象的行为,同时不产生紧耦合关系(即使用if else或者swith所带来的紧耦合关 ...

  9. sql server 性能调优之 资源等待 CXPACKET

    一.概述  CXPACKET是指:线程正在等待彼此完成并行处理.什么意思呢? 当sql server发现一条指令复杂时,会决定用多个线程并行来执行,由于某些并行线程已完成工作,在等待其它并行线程来同步 ...

  10. 上传文件报错--Unable to find 'struts.multipart.saveDir' property setting.

    struts2 上传文件时,有时候会报这个错误. Unable to find 'struts.multipart.saveDir' property setting. Defaulting to j ...