三级联动菜单

Html

Css

for (var i = 0; i < res.data.length; i++) {
            html += "<option value=" + res.data[i].CatalogueId + ">" + res.data[i].CatalogueContent + "</option>";
        }
        $("#" + nowCatalogue).append(html);
    } else {
        //获取失败，抛出错误信息
        window.alert(res.msg);
    }
};

//用户点击一级目录 给二级目录赋值
$("#firstCatalogue").change(function() {
    var preCatalogue = "firstCatalogue";
    var nowCatalogue = "secondCatalogue";
    var catalogueNum = "二";
    getCatalogue(preCatalogue, nowCatalogue, catalogueNum);
});

// 用户点击二级目录
$('#secondCatalogue').change(function() {
    var preCatalogue = "secondCatalogue";
    var nowCatalogue = "thirdCatalogue";
    var catalogueNum = "三";
    getCatalogue(preCatalogue, nowCatalogue, catalogueNum);
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

三级联动菜单



代码描述：jquery实现的超简单三级联动菜单

三级联动菜单正确实现原理：
1、一级菜单默认全部，即页面加载时就有选项值（后端同步循环填入，或，前端ajax填入）；
2、用户点击（change）一级菜单，ajax填入二级菜单的内容；
3、用户点击二级菜单，ajax填入三级菜单的内容；
错误思路
1、一级菜单默认全部；
2、用户点击（click）二级菜单，填入二级菜单内容;
3、用户点击三级菜单，填入三级菜单内容；
错误思路出现的问题：
1、二级菜单点击不能完全展开，需再次点击才能展开全部选项；
2、动态添加的选项不能正常选中；

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

木木秋

相关代码

三级联动菜单

三级联动菜单正确实现原理：

最新