三级联动菜单

Html

Css

Js

    --选择一级目录（不选默认全部）--
    1级目录1
    1级目录2
    1级目录3
    

        --选择二级目录（不选默认全部）--
    

    --选择三级目录（不选默认全部）--
    111
    222
    333

function getCatalogue(preCatalogue, nowCatalogue, catalogueNum) { //上级目录没选默认全部 var CatalogueId = $("#" + preCatalogue).val(); //清空本级菜单选项 var selhtml = $("#" + nowCatalogue).html(""); var res = { "code": 0, "msg": "", "data": [{ "CatalogueId": 1, "CatalogueContent": "具体目录内容1" }, { "CatalogueId": 2, "CatalogueContent": "具体目录内容2" }, { "CatalogueId": 3, "CatalogueContent": "具体目录内容3" }] }; if (res.code == 0) { //获取成功 var html = "<option value='0'>--选择" + catalogueNum + "级目录（不选默认全部）--</option>"; 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

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

1、一级菜单默认全部，即页面加载时就有选项值（后端同步循环填入，或，前端ajax填入）；

2、用户点击（change）一级菜单，ajax填入二级菜单的内容；

3、用户点击二级菜单，ajax填入三级菜单的内容；

错误思路

1、一级菜单默认全部；

2、用户点击（click）二级菜单，填入二级菜单内容;

3、用户点击三级菜单，填入三级菜单内容；

错误思路出现的问题：

1、二级菜单点击不能完全展开，需再次点击才能展开全部选项；

2、动态添加的选项不能正常选中；