<!-- 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. ReactNative学习一

    ReactNative   主要学习来源于RN官方文档https://reactnative.cn/docs/0.51/getting-started.html 不过除了这个RN官方文档,其他RN中文 ...

  2. Django框架之cookie和session及开发登录功能

    1.cookie是什么? Web应用程序是使用HTTP协议传输数据的.HTTP协议是无状态的协议.一旦数据交换完毕,客户端与服务器端的连接就会关闭,再次交换数据需要建立新的连接.这就意味着服务器无法从 ...

  3. php数组函数-array_reduce()

    array_reduce()函数发送数组中的值到用户自定义函数,并返回一个字符串. 注:如果数组是空的或则初始化值未传递,该函数返回NULL array_reduce(array,myfunction ...

  4. INSPIRED启示录 读书笔记 - 第40章 最佳实践经验

    十大要点 1.产品管理的职责:许多产品经理将大把的时间浪费在与产品管理无关的工作上 2.用户体验:对于大多数软件产品来说,用户体验就是产品的生命 3.机会评估:用方便快捷的机会评估方法取代过时的市场需 ...

  5. Windows10提示“没有权限使用网络资源”的解决方案

    1.点击“开始→运行”,在“运行”对话框中输入“GPEDIT.MSC”,打开组策略编辑器 2.依次选择“计算机配置→Windows设置→安全设置→本地策略→用户权利分配” 3.双击“拒绝从网络访问这台 ...

  6. Docker 监控平台Prometheus

    Prometheus 是一个强大的监控平台,提供了监控数据搜集.存储.处理.可视化和告警一套完整的解决方案. 官方网站:https://prometheus.io

  7. freopen重定向输入

    #include <bits\stdc++.h> using namespace std; int main() { freopen("C:\\Users\\dcf\\Deskt ...

  8. poj 3468 线段树模板题

    #include<iostream> #include<algorithm> #include<stdio.h> using namespace std; #def ...

  9. HMM简单理解（来自quora&其他网上资料）

    转载自quora: 连接:https://www.quora.com/What-is-a-simple-explanation-of-the-Hidden-Markov-Model-algorithm ...

  10. struts2数据类型转换详解

    Web应用程序的交互都是建立在HTTP之上的,互相传递的都是字符串.也就是说服务器接收到的来自用户的数据只能是字符串或者是字符数组,而在Web应用的对象中,往往使用了多种不同的类型,如整数(int). ...