两、三级联动菜单,简单的实现(2)

两、三级联动菜单,简单的实现(2)

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

在上一篇文章中两个联动菜单,简单的实现我写了一个插件,但是只支持两个链接,完好下支持二 、三级联动

/**
 * jQuery Linkage Menu
 *
 * Copyright 2014, sunyingyuan
 * QQ: 1586383022
 * Email: yingyuansun@163.com
 *
 * 二级/三级 联动菜单
 * 支持二级或三级联动。支持页面静态json和AJAX动态从后台获取值
 *
 * 简单用法介绍:
 * HTML代码:
 * <select id="selectOne">
 *      <option>一级菜单默认显示名称</option>
 * </select>
 * <select id="selectTwo">
 *      <option>二级菜单默认显示名称</option>
 * </select>
 * 假设有三级菜单,同上
 *
 * JS代码:
 * 引入jQuery和jquery.linkageMenu.js后
 * 当中jquery.linkageMenu.js必须在jQuery之后引入
 *
 * $(function(){
 *          $.linkageMenu({
 *              'selectOneId': 'selectOne', //一级菜单Id
                'selectTwoId': 'selectTwo', //二级菜单Id
                'selectThreeId': '', //三级菜单Id
                'selectOneVal': '', //一级菜单option值
                'selectTwoVal': '', //二级菜单option值
                'selectThreeVal': '', //三级菜单option值
                'selectOneParam': 'selectOneValue', //向后台获取二级菜单的值时,一级菜单的參数名称,默认是selectOneValue
                'selectTwoParam': 'selectTwoValue', //向后台获取三级菜单的值时,二级菜单的參数名称,默认是selectTwoValue
                'getSelectTwoValUrl': '', //得到二级菜单value的url
                'getSelectThreeValUrl': '' //得到三级菜单value的url
 *          });
 * });
 *
 */
(function ($) {
    $.linkageMenu = function (options) {

        //默认參数
        var settings = $.extend({
            'selectOneId': 'selectOne', //一级菜单Id
            'selectTwoId': 'selectTwo', //二级菜单Id
            'selectThreeId': '', //三级菜单Id
            'selectOneVal': '', //一级菜单option值
            'selectTwoVal': '', //二级菜单option值
            'selectThreeVal': '', //三级菜单option值
            'selectOneParam': 'selectOneValue', //向后台获取二级菜单的值时,一级菜单的參数名称,默认是selectOneValue
            'selectTwoParam': 'selectTwoValue', //向后台获取三级菜单的值时。二级菜单的參数名称。默认是selectTwoValue
            'getSelectTwoValUrl': '', //得到二级菜单value的url
            'getSelectThreeValUrl': '' //得到三级菜单value的url
        }, options);

        var $s1 = $("#" + settings.selectOneId);
        var $s2 = $("#" + settings.selectTwoId);
        var $s3 = $("#" + settings.selectThreeId);

        //一级菜单初始化
        _selectValParseJSON($.parseJSON(settings.selectOneVal), $s1);
        //当一级菜单变化时。二级菜单改变option值
        $s1.change(function () {
            _changeMenu($s1, $s2, settings.selectTwoVal, settings.selectOneParam, settings.getSelectTwoValUrl);
            $s2.change();
        });

        //假设有三级菜单。当二级菜单改变时,三级菜单改变option
        if (settings.selectThreeId) {
            $s2.change(function () {
                _changeMenu($s2, $s3, settings.selectThreeVal, settings.selectTwoParam, settings.getSelectThreeValUrl);
            });
        }

        /**
         * Private Methods : _changeMenu
         *
         * 当select组件的value发生改变时,对下一级select组件value产生的影响,即下一级select组件值的改变
         * @param preSelectIdObj : value发生变化的组件的对象
         * @param folSelectIdObj : 因为变化的组件产生影响的下一级组件的对象
         * @param folSelectMenuVal : 下一级组件的静态值(非AJAX从后台获取数据时用)
         * @param getFolSelectMenuValParam : AJAX获取数据时。向后台请求的參数
         * @param getFolSelectMenuValUrl : AJAX获取数据的URL
         * @private
         */
        function _changeMenu(preSelectIdObj, folSelectIdObj, folSelectMenuVal, getFolSelectMenuValParam, getFolSelectMenuValUrl) {
            //preSelectIdObj.change(function () {
            folSelectIdObj.html("");
            var preSelectedVal = preSelectIdObj.val();
            if (folSelectMenuVal) {
                _selectValParseJSON($.parseJSON(folSelectMenuVal), folSelectIdObj);
                return;
            }
            //ajax异步获取下一级菜单数据
            $.ajax({
                type: "GET",
                url: getFolSelectMenuValUrl,
                data: getFolSelectMenuValParam + "=" + preSelectedVal,
                success: function (val) {
                    _selectValParseJSON($.parseJSON(val), folSelectIdObj);
                }
            });
            //});
        }

        /**
         * Private Methods : _selectValParseJSON
         *
         * 将json填充到指定id的select组件上
         * @param jsonVal : json对象,要填充到select组件上的json对象
         * @param selectId : 要填充的select组件的Id
         * @private
         */
        function _selectValParseJSON(jsonVal, selectId) {
            $.each(jsonVal, function (key, val) {
                _appendOptionTo(selectId, key, val);
            });
        };

        /**
         * Private Methods : _appendOptionTo
         *
         * 将值添加到option组件
         * @param $obj : The selected object jquery,一般为须要加入option的select对象
         * @param key : option的key,一般为设置的Id
         * @param val ; option的val,同一时候一般也作为显示的值,在这里我们默觉得显示的value和option的value是同一个值
         * @param defaultSelectVal ; 设置默认选中的值,一般为初始化的情况下,默认选中的value
         * @private
         */
        function _appendOptionTo($obj, key, val, defaultSelectVal) {
            var $opt = $("<option>").text(key).val(val);
            if (val == defaultSelectVal) {
                $opt.attr("selected", "selected");
            }
            $opt.appendTo($obj);
        }
    };
})(jQuery);

下面为測试HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test Select</title>
    <script src="jquery-1.11.0.js"></script>
    <script src="test.js"></script>
    <script>
$(function(){
    $.linkageMenu({
        'selectOneId': 'selectOne',
        'selectTwoId': 'selectTwo',
        'selectThreeId': 'selectThree',
        'selectOneVal': '{"key1":"value1", "key2":"value2"}',
        //'selectTwoVal': '{"abc":"abc", "abca":"abca"}',
        'selectThreeVal': '{"abc":"abc", "abca":"abca"}',
        'getSelectTwoValUrl': 'http://localhost:8080/getSelect2Val/listAll'
    });
});
</script>
</head>
<body>
	<div>
        <select id="selectOne">
        	<option>一级菜单</option>
        </select>
        <select id="selectTwo">
        	<option>请选择一级菜单</option>
        </select>
        <select id="selectThree">
        	<option>请选择二级菜单</option>
        </select>
    </div>
</body>
</html>

git地址为https://github.com/sunyingyuan/jquery.linkageMenu

版权声明:本文博客原创文章。博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117171.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 如何在系统中添加字体(添加字体到系统)

    笔者最近在使用win10自带的OneNote笔记本记笔记的时候,发现笔者电脑中没有华文新魏这个字体,最开始以为是OneNote不带有这个字体,经过一段时间的收集资料后发现,是笔者电脑win10系统中不带有这个字体,现将有关概念和字体安装方法做一下记录。字体是win10系统自己带有的,其他的软件自能从win10系统中用调用,而不是说字体是某些软件自带的,比如如果office的PPT中含有华文新魏这个字体,那么OneNote中就必然也含有华文新魏这个字体,并不会存在一个软件有这个字体而另一个软件不含有这个字体

  • RNN学习笔记(一)-简介及BPTT RTRL及Hybrid(FP/BPTT)算法[通俗易懂]

    RNN学习笔记(一)-简介及BPTT RTRL及Hybrid(FP/BPTT)算法[通俗易懂]RNN网络的学习算法-BPTT笔记本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗Ctrl+B斜体Ctrl+I引

  • ue4封装接口_ue4导出模型

    ue4封装接口_ue4导出模型原创文章,转载请注明出处。本文带大家认识UE4插件/模块的使用方式Dll。既然为DLL,那么我们就可以对其封装,做到不公开cpp的目的。1>新建一个Plugin2>在plugin中创建一个Actor类,并在里面写一个UE4的Log输出函数。3>对其进行编译,编译出不同模式的dll出来4>在UE4场景中测试我们Log函数5>删除cpp文件6>在我们的.build.cs中添加不参数编译的参数bUsePrecompiled=true;7>再到UE4场景中测试我们L

  • 怎样防止苹果系统更新_苹果手机屏蔽系统更新描述文件链接,可屏蔽ios12更新…「建议收藏」

    https://beta.thuthuatios.com/tvos/tvOS_12_Beta_Profile.mobileconfig苹果手机屏蔽系统更新描述文件,屏蔽最新ios12版本更新!安装方法:长按复制上面链接,复制到safari浏览器打开浏览,再安装即可,会提示重启!手机重启后,去手机删除已下载的系统更新包ios12.1文件!删除更新包操作:设置-通用-储存空间与iclo…

  • TTL232和RS232的区别

    逻辑电平定义不同:TTL232的0是用0v表示。1是用5V表示。RS232的0是用+3V–+15V表示,1是用-3V—15V表示。接口一般都用三根线,1:地线。2:写入。3:导出。他们不可直连,中间需接电平转接板,…

  • mybatis-log plugiin激活码(JetBrains全家桶)

    (mybatis-log plugiin激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1STL…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号