<!-- 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. ASP.NET 4.0 ListView等容器控件中获取ClientID值与HTML中自动生成ID字符串不一样问题。

    ASP.NET 4.0 中 ClientIDMode的属性 可以设置获取不同ID格式的值. 项目中遇到的问题: 1.ListView1 ItemDataBound事件中,获取ClientID结果与自动 ...

  2. $git学习总结系列（2）——远程仓库

    本文主要介绍git本地仓库和GitHub远程仓库之间的交互和数据传输. 注:首先需要到github.com上注册一个账号. 1. 添加本地SSH Key到GitHub 要向GitHub远程仓库推送代码 ...

  3. Docker容器技术-创建一个简单的Web应用

    一.创建一个简单的Web应用 1.identicon 基于某个值而自动产生的图像,这个值是IP地址或用户名的散列值. 用途: 通过计算用户名或IP地址的散列值,在网站上提供用于识别用户的图像,以及自动 ...

  4. NAS、SAN、DAS 说明

    NAS 说明 1.NAS(Network Attached Storage:网络附属存储) 2.NAS 是一种采用直接与网络介质相连的特殊设备实现数据存储的机制. 3.NAS本身能够支持多种协议(如N ...

  5. 20145239《网络对抗》- 逆向及Bof基础实践

    1 逆向及Bof基础实践说明 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件.该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串.该程序同 ...

  6. leetcode刷题1:两数之和two_sum

    题目:(难度:Easy) 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, ...

  7. 如何用hexo+github搭建个人博客

    搭建环境 1.安装 Node.js: https://nodejs.org/en/ windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install ...

  8. MySQL实时性能监控工具doDBA tools

    doDBA tools是什么? doDBA tools是一个基于控制台的远程监控工具,它不需要在本地/远程系统上安装任何软件,它可以实时收集操作系统.MySQL.InnoDB的实时性能状态数据,并可以 ...

  9. How does asp.net web api work?

    https://hub.packtpub.com/working-aspnet-web-api/ https://docs.microsoft.com/en-us/aspnet/web-api/ove ...

  10. ZK服务管理中心

    ZK基础类及服务的注册与发现: package top.letsgogo.util; import org.I0Itec.zkclient.ZkClient; import org.I0Itec.zk ...