<!-- 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. Oracle表约束

    约束的概述: 约束是在表中定义的用于维护数据库完整性的一些规则 (1).主键约束 不能为空也不能重复 在一个表中只能定义一个主键约束 Oracle会在主键上建立一个唯一索引,可以指定唯一索引的存储位置 ...

  2. ERROR 2003 (HY000): Can't connect to MySQL server on "" (113)

    服务器为centos6. 这个原因是因为防火墙的问题 在mysql服务端执行 service iptables stop chkconfig iptables off #永久关闭防火墙 看情况执行 然 ...

  3. Linux Shell基础 环境变量配置文件

    source命令:使环境变量配置文件强制生效 source 命令会强制执行脚本中的全部命令,而忽略脚本文件的权限.该命令主要用于让重新配置的环境变量配置文件强制生效.source 命令格式如下: [r ...

  4. java基础—— Collections.sort的两种用法

    package com.jabberchina.test; import java.util.ArrayList; import java.util.Collections; import java. ...

  5. js实现给一个数组监听

    $.when.apply(null, table).done(callback); table=[]是个数组,用上$.when.apply就可以监听完成后执行callback 方法 callback就 ...

  6. win7 加载 usb3.0驱动

    1.去微软官网下一个 usb3.0 驱动 https://downloadcenter.intel.com/zh-cn/download/26254/-NUC-NUC6i7kyk-USB3-0-Win ...

  7. Windows 7安装PHP运行环境和开发环境

    1. 安装Apache 下载地址:http://www.apache.org/dyn/closer.cgi/httpd/binaries/win32 如需更改端口:打开Apache安装目录下conf目 ...

  8. java深入探究12-框架整合

    1.Spring与Hibernate整合 需要配置的就是hibernate和bean.xml 1)关键点:sessionFactory创建交给SpringIOC:session的事务处理交给Sprin ...

  9. 新手学逆向，调试abexcm1过程

    写在前面的话:在下完全就是一个新手,现在目前在学16位汇编,偶尔用OD调试看看程序,主要就是为了学习,今天写这个帖子,完全就是笔记用,然后拿出来和大家一起讨论交流. 因为刚开始接触,文章可能一些地方有 ...

  10. Visual Studio中用于ASP.NET Web项目的Web服务器

    当您在 Visual Studio 中开发 Web 项目时,需要 Web 服务器才能测试或运行它们. 利用 Visual Studio,您可以使用不同的 Web 服务器进行测试,包括 IIS Expr ...