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. 小程序开发基础-scroll-view 可滚动视图区域

    小编 / 达叔小生 小程序开发基础-scroll-view 可滚动视图区域 这里只展示纵向滚动,横向同理就不用说明了,可自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可. scro ...

  2. [Postman]响应(7)

    Postman响应查看器有助于确保API响应的正确性.API响应由正文,标题和状态代码组成.邮递员在不同的标签中组织正文和标题.选项卡旁边会显示API调用的状态代码和完成时间. 响应还包含HTTP规范 ...

  3. java后端服务器读取excel将数据导入数据库

    使用的是easypoi,官网文档:http://easypoi.mydoc.io/ /** * 导入Excel文件 */ @PostMapping("/importTeacher" ...

  4. [P5162] WD与积木

    每种堆法(理解成名次序列,举例3,3,8,2和7,7,100,2都对应2,2,1,3这个名次序列)等概率出现:题目中"两种堆法不同当且仅当某个积木在两种堆法中处于不同的层中"可见这 ...

  5. border-image属性把边框的背景设置为图片

    一.浏览器对它的支持Firefox3.5-Firefox15     需要加-moz-前缀Firefox15以上              同样支持-moz-前缀的css代码,但是必须在css代码中加 ...

  6. 关于EF的三种分类----CodeFirst

    新建StudentInfo.cs using System; using System.Collections.Generic; using System.ComponentModel.DataAnn ...

  7. vc-mysql-sniffer统计MySQL的SQL分布

    有时候我们需要统计线上的SQL执行情况,比如想知道哪条SQL执行最频繁,我们可以开启general_log,然后进行统计,但是general_log开启非常损耗性能,那么我们可以使用vc-mysql- ...

  8. MODIS数据的下载（新地址）

    Modis数据下载方法 1.1打开网址 浏览器输入地址:https://ladsweb.nascom.nasa.gov/search 注:需要一定的等待时间,如果一直打不开,就需要FQ.(网址加载了g ...

  9. 一个注意事项：内部类引用的外部变量必须是final的

    之前写过一个项目,好久没更新了,最近翻起以前的代码,发现在这里报了一个错.(现在转到Intellij了,从前在Eclipse luna中是可以编译通过的,Eclipse mars也会报错,JDK版本都 ...

  10. easyui combobox 设置滚动条

    设置滚动条: 1 panelHeight:200  :设置固定的高度. 2 panelHeight:'auto', panelMaxHeight:200. <input class=" ...