大家好,又见面了,我是全栈君,今天给大家准备了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账号...