<!-- 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. win32调试——OutputDebugString

    win32下开发console程序可以直接用printf打印到控制台. 开发图形界面程序时,可以调用OutputDebugString将字符串输出到Debug窗口, 注意是要调试运行才能看到Debug ...

  2. MATLAB画图设置长宽。并高清复制

  3. springboot中Controller没有被扫描

    今天给客户开发登陆的密码加密需求,研究一下想,需要在本地搭一套环境,前台用js实现RAS加密,后台使用java解密.本是一套非常简单的环境,看最近springboot比较常用,所以想要搭一下sprin ...

  4. com.android.dex.DexIndexOverflowException: Cannot merge new index 66299 into a non-jumbo instruction

    打包时控制台输出: Error:Execution failed for task ':app:transformClassesWithDexForAll32Release'. > com.an ...

  5. 七、golang中接口、反射

    一.接口定义 1.定义 interface类型可以定义一组方法,但是这些不需要实现,并且interface不能包含任何变量 package main import ( "fmt" ...

  6. iOS_AutoLayout自动布局

    目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言     一.什么是AutoLayout? Autolayout是一种“自动布局”技术,专门用来布局UI界面 ...

  7. INSPIRED启示录 读书笔记 - 第5章 产品管理与软件开发

    保持融洽的合作关系 形成合作关系的关键是双方承认彼此平等——任何一方不从属于另一方,产品经理负责定义正确的产品,开发团队负责正确地开发产品,双方相互依赖 产品经理要求开发团队完成任务,必须先取得他们的 ...

  8. Linux 修改DNS解决 Could not retrieve mirrorlist" 报错

    CentOS yum有时出现“Could not retrieve mirrorlist ”的解决办法——resolv.conf的配置 或者IP配置文件上写入 缺少DNS引起的问题1. 无法识别域名 ...

  9. Sqoop将MySQL表结构同步到hive(text、orc)

    Sqoop将MySQL表结构同步到hive sqoop create-hive-table --connect jdbc:mysql://localhost:3306/sqooptest --user ...

  10. Python DB API 连接数据库

    Python DB API Mysql,Oracle,SqlServer 不关闭,会浪费资源.