<!-- author：青芒 -->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>三级联动菜单</title>

</head>

<body>

    <select class="one">

        <option value="请选择">请选择</option>

    </select>

    <select class="two">

        <option value="请选择">请选择</option>

    </select>

    <select class="three">

        <option value="请选择">请选择</option>

    </select>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script>

        $(function(){

            var oneArr = ["1","2","3"]; //数组1

            var twoArr = [ //数组2

                ["1-1","1-2","1-3"],

                ["2-1","2-2","2-3"],

                ["3-1","3-2","3-3"]

            ];

            var threeArr = [ //数组3

                [

                    ["1-1-1","1-1-2","1-1-3"],["1-2-1","1-2-2","1-2-3"],["1-3-1","1-3-2","1-3-3"]

                ],

                [

                    ["2-1-1","2-1-2","2-1-3"],["2-2-1","2-2-2","2-2-3"],["2-3-1","2-3-2","2-3-3"]

                ],

                [

                    ["3-1-1","3-1-2","3-1-3"],["3-2-1","3-2-2","3-2-3"],["3-3-1","3-3-2","3-3-3"]

                ]

            ];

            let oneHtml = '<option value="请选择">请选择</option>';

            for(let i in oneArr){

                i = Number(i);

                oneHtml += '<option value="'+ i +'">'+ oneArr[i] +'</option>';

            }

            $(".one").html(oneHtml);

            $(".one").change(function(){ //下拉框1选择事件

                if($(this).val() == "请选择"){ //下拉框1如果点击了请选择，则2,3都内容都重置成“请选择”

                    $(".two, .three").html('<option value="请选择">请选择</option>');

                    return;

                }

                let thisVal = Number($(this).val());

                let twoHtml = '';

                for(let j in twoArr[thisVal]){

                    j = Number(j);

                    twoHtml += '<option value="'+ (j+1) +'">'+ twoArr[thisVal][j] +'</option>';

                }

                $(".two").html(twoHtml);

                let threeHtml = '';

                for(let k in threeArr[thisVal][0]){

                    k = Number(k);

                    threeHtml += '<option value="'+ (k+1) +'">'+ threeArr[thisVal][0][k] +'</option>';

                }

                $(".three").html(threeHtml);

            });

            $(".two").change(function(){ //下拉框2选择事件

                let oneVal = Number($(".one").val());

                let thisVal = Number($(this).val()) - 1;

                let threeHtml = '';

                for(let x in threeArr[oneVal][thisVal]){

                    threeHtml += '<option value="'+ (x+1) +'">'+ threeArr[oneVal][thisVal][x] +'</option>';

                }

                $(".three").html(threeHtml);

            });

        })

    </script>

</body>

</html>

基于JQ的三级联动菜单选择的更多相关文章

  1. layui省市区三级联动城市选择

    基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...

  2. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

  3. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  4. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  5. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  6. Python实现用户交互，显示省市县三级联动的选择

    题目:Python实现用户交互,显示省市县三级联动的选择 定义的字典为: dic = { "江西": { "萍乡": ["安源", &quo ...

  7. jQuery实现三级联动菜单（鼠标悬停联动）

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  8. C# 基于Bootstrap的三级联动

    实现效果如图: 一.声明市.县.乡对应的下拉控件select <div class="form-group"> <label class="col-sm ...

  9. 学习 | 基于require.js的三级联动菜单【入门】

    主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加 ...

随机推荐

  1. eclipse连接SqlServer2008（被它搞得惨兮兮）

    建民大叔告诉我要考试做一个系统要求连接SqlServer2008,于是我便开始了“炼狱”,人家连接起来一路绿灯,我却一路红灯所以决定把它记录下来,给后来人提供方便. 第一个红灯: 启动服务后利用cmd ...

  2. Spring AOP 学习（一） 代理模式

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程(也叫面向方面),可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...

  3. window.name跨域

    window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...

  4. 【Head First Servlets and JSP】笔记8：监听者

    1.你不用了解所有监听者API,并不多,一共有8个.不过,你需要知道你能监听什么,以便在需要的时候可以查. 2.关于Session和Cookie.参见JavaWeb学习总结(十二)——Session ...

  5. P4121 [WC2005]双面棋盘

    题目 P4121 [WC2005]双面棋盘 貌似是刘汝佳出的题目?? 做法 线段树维护并查集 线段树分治\(1\)~\(n\)行,我们要考虑维护的肯定是黑.白各自的联通块数量 考虑区间合并,其实就与中 ...

  6. R和Python小数的保留

    R: 1.保留几位有效数字: signif(x,digits) 2.保留几位小数: round(x,digits) Python: 1.“%.2f”%a

  7. Ubuntu 使用国内apt源

    编辑/etc/apt/source-list deb http://cn.archive.ubuntu.com/ubuntu/ trusty main restricted universe mult ...

  8. 异常:没有找到本地方法库,java.lang.UnsatisfiedLinkError: no trsbean in java.library.path

    1.问题描述 迁移环境中遇到这个问题 : Fri Apr 20 15:22:31 CST 2018, Exception:500004___-500004,没有找到本地方法库,java.lang.Un ...

  9. myEclipse 输入时英文自动变成2个字符大小

    比如这样: ——这是输入法的问题,输入法被误设为圆角了. 输入法有区分圆角半角,正常来说我们使用的都是半角. 那么如何切换半圆角? ——比如:百度输入法 首先,将半圆角的快捷键显示出来: ——点击“d ...

  10. hdu 5904 LCIS dp

    LCIS Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Problem Des ...