经常碰到这样的需求，如省市_城市_乡镇下拉框。后一个下拉框的内容会根据前一个的改变而改变，之前的解决方法往往是在前一个改变的时候，向后台发送请求临时获取对应的内容。这样每触发一次就会网络请求一次，这种方法显然不甚合理，下面使用下拉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. 浏览器 user-agent 字符串的故事

    你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? 故事还得从头说起,最初的主角叫NCSA Mosaic,简称Mosaic(马赛克),是1992年末位于伊利诺伊大 ...

  2. php开源项目

    论坛社区:Discuz.PHPWind.ThinkSAAS.phpBB CMS内容管理:DedeCMS.PHPCMS.帝国CMS.齐博CMS.Drupal 企业建站:CmsEasy.KingCMS.P ...

  3. unity中Debug输出控制

    1 需求: (1)选择在界面.console中输出,并且能够设置保存到文档 (2)控制debug是否输出,可以在debug模式下输出,release模式下不输出 2 参考: 谢谢雨松同学的博客:htt ...

  4. 10.PHP内核探索：Apache运行与钩子函数

    Apache是目前世界上使用最为广泛的一种Web Server,它以跨平台.高效和稳定而闻名.按照去年官方统计的数据,Apache服务器的装机量占该市场60%以上的份额.尤其是在 X(Unix/Lin ...

  5. jquery循环绑定事件

    <html> <head> <title></title> <script type="text/javascript" sr ...

  6. Oozie协作框架

    一:概述 1.大数据协作框架 2.Hadoop的任务调度 3.Oozie的三大功能 Oozie Workflow jobs Oozie Coordinator jobs Oozie Bundle 4. ...

  7. VirtualBox 使用技巧

    一.VirtualBox 的快捷键 VirtualBox 默认的 Host 键是 Right Ctrl Host 键可以点击 Oracle VM VirtualBox 管理器的左上角 “管理”-> ...

  8. Dlib is a modern C++ toolkit（非常全面的类库）

    http://dlib.net/ http://download.csdn.net/detail/lajuedan2508/9726225 http://download.csdn.net/detai ...

  9. Largest Number || LeetCode

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX 1000 int cm ...

  10. jade编译乱码问题

    加上: meta(http-equiv="Content-Type",content="text/html; charset=utf-8")