经常碰到这样的需求，如省市_城市_乡镇下拉框。后一个下拉框的内容会根据前一个的改变而改变，之前的解决方法往往是在前一个改变的时候，向后台发送请求临时获取对应的内容。这样每触发一次就会网络请求一次，这种方法显然不甚合理，下面使用下拉js实现的联动下拉框，只需要在页面加载的时候将数据准备好，根据数据key值的巧妙设置来实现联动。

联动下拉框的html代码

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <title>下拉框联动效果</title>

    <script src="js/mySelects.js"></script>

</head>

<body>

    <div id="div1"></div>

</body>

</html>

联动下拉框html代码

联动下拉框的js代码

document.addEventListener('DOMContentLoaded',function(){

    console.log('domContentLoaded');

    var mySels=new Sels({'id':'div1','level':''});

    //第一级下拉框的数据

    mySels.add('',['','','']);

    //第二级下拉框的数据，1_i对应第一级下拉框第i个选中项

    mySels.add('1_1',['1_1','1_2','1_3']);

    mySels.add('1_2',['2_1','2_2','2_3']);

    mySels.add('1_3',['3_1','3_2','3_3']);

    //第三级下拉框的数据，1_i_j对应第一级下拉框第i个选中项，第二级下拉框第j个选中项的数据

    mySels.add('1_1_1',['1_1_1','1_1_2','1_1_3']);

    mySels.add('1_1_2',['1_2_1','1_2_2','1_2_3']);

    mySels.add('1_1_3',['1_3_1','1_3_2','1_3_3']);

    mySels.add('1_2_1',['2_1_1','2_1_2','2_1_3']);

    mySels.add('1_2_2',['2_2_1','2_2_2','2_2_3']);

    mySels.add('1_2_3',['2_3_1','2_3_2','2_3_3']);

    mySels.add('1_3_1',['3_1_1','3_1_2','3_1_3']);

    mySels.add('1_3_2',['3_2_1','3_2_2','3_2_3']);

    mySels.add('1_3_3',['3_3_1','3_3_2','3_3_3']);

    mySels.init(this.level);

},false);

//联动下拉菜单对应的类,level代表多少级下拉菜单

function extendOptions(oldOpt,newOpt){

    //如果没有就添加，如果有就替换

    for(var key in newOpt){

        oldOpt[key]=newOpt[key];

    }

}

/**

*option 构造联动下拉菜单的初始化参数，其中以下两项是必须的：

*id:联动下拉菜单父元素的id

*level:联动下拉菜单包含几级下拉菜单

*/

function Sels(option){

    extendOptions(this,option);

    this.oParent=document.getElementById(this.id);

    this.data={};

    //构造函数没有执行完，对象还未创建，因此不能调用相关函数?

    this.selects=this.oParent.getElementsByTagName('select');

}

Sels.prototype={

    constructor:Sels,

    add:function(key,value){

        this.data[key]=value;

    },

    init:function(level){

        var that=this;

        for(var i=;i<=this.level;i++){

            var oSel=document.createElement('select');

            var oOpt=new Option('默认','默认');

            oSel.add(oOpt,undefined);

            oSel.index=i;

            //为其指定change事件

            oSel.addEventListener('change',function(){

                //内部函数的this指向的是当前的select对象

                that.change(this.index);

            },false);

            this.oParent.appendChild(oSel);

        }

        //为第一个下拉框添加选项

        var arr=this.data[''];

        for(i=,len=arr.length;i<len;i++){

            oOpt=new Option(arr[i],arr[i]);

            this.selects[].add(oOpt,undefined);

        }

    },

    //index代表当前发生change事件是在第几级下拉框，其后的下拉框需要对该事件做出相应

    change:function(index){

        var str='';

        for(var i=;i<index;i++){

            str+='_'+this.selects[i].options.selectedIndex;

        }

        if(this.data[str]){

            this.selects[index].options.length=;

            var arr=this.data[str];

            for(var i=;i<arr.length;i++){

                var oOpt=new Option(arr[i],arr[i]);

                this.selects[index].add(oOpt,undefined);

            }

            this.selects[index].options[].selected=true;

            //之后的一次联动

            index++;

            if(index<this.selects.length){

                this.change(index);

            }

        }else{

            //说明选择的是默认

            //此时，将后面的选项都仅保留“默认”这一项即可

            for(var i=index;i<this.selects.length;i++){

                this.selects[i].options.length=;

            }

        }

    },

};

联动下拉框js代码

相关知识点整理：

1.利用data的key值来实现联动

2.面向对象的思路

javascript实例学习之一——联动下拉框的更多相关文章

  1. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  2. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. SharePoint 2013 使用查阅项实现联动下拉框

    SharePoint列表使用中,经常会用到下拉框,而有些特殊的需求,会用到联动的下拉框,在SharePoint中默认没有这样的字段,所以如果实现,我们需要自己想办法. 这里,我们介绍如何使用JQuer ...

  4. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  5. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  7. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  8. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  9. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

随机推荐

  1. Scrum会议2

    小组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.17 已完成内容: 1.连连游戏的图片素材选取. 2.连连看具体的功能种类. 计划完成: ...

  2. HTTP POST, PUT PATCH

    POST = 新增 GET = 讀取 PUT = 更新 DELETE = 刪除 PUT 会在地址栏显示参数信息,不安全! 理解POST和PUT的区别,顺便提下RESTfu 这两个方法咋一看都可以更新资 ...

  3. css实现文字过长省略显示

    .simpleName { width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } <div cl ...

  4. 用宏 x y z，找出最大值最小值

    #define max(x,y,z) ((x)>(y)?(x):(y))>(z)?((x)>(y)?(x):(y)):(z) #define min(x,y,z) ((x)<( ...

  5. wordpress 添加自定义菜单到管理面板（wp-admin)

    如果你在做 wordpress 主题或插件的开发,通常需要在后台dashboard管理面板添加菜单方便用户做主题设置或插件设置.这篇文章要讨论的问题就是怎么样加这个菜单,加在哪里? 添加顶级菜单项 a ...

  6. textView截取字符串-医生工作台1期

    textfield截取字符串 ios7 会崩溃 解: 之前的写法是这样的 正确的写法:   先判断markedTextRange是否为nil,   markedTextRange这个属性是啥意思呢 表 ...

  7. Vaadin

    Vaadin 这个是用Java 做的  一个人就可以完成 你去网上搜一下  教程 https://vaadin.com/home  官网 http://baike.baidu.com/link?url ...

  8. ssi服务器端指令

    SSI使用详解 你是否曾经或正在为如何能够在最短的时间内完成对一个包含上千个页面的网站的修改而苦恼?那么可以看一下本文的介绍,或许能够对你有所帮助.什么是SSI?SSI是英文Server Side I ...

  9. 已禁用对分布式事务管理器(MSDTC)的网络访问。请使用组件服务管理工具启用 DTC 以便在 MSDTC 安全配置中进行网络访问。

    今天写ASP.NET程序,在网页后台的c#代码里写了个事务,事务内部对一张表进行批量插入,对另外一张表进行查询与批量插入. 结果第二张表查询后foreach迭代操作时报错:已禁用对分布式事务管理器(M ...

  10. 低功耗蓝牙4.0BLE编程-nrf51822开发(5)-链路层

    链路层定义设备处于状态机中五种状态的一种: (1)旁路状态: 处于此状态下的设备不发送或接收数据,处于其它状态下都可以转到此状态. (2)广告状态: 处于此状态的设备发送广播包或者监听.响应广播包.可 ...