三级联动菜单正确实现原理
1、一级菜单默认全部，即页面加载时就有选项值（后端同步循环填入，或，前端ajax填入）；
2、用户点击（change）一级菜单，ajax填入二级菜单的内容；
3、用户点击二级菜单，ajax填入三级菜单的内容；
错误思路
1、一级菜单默认全部；
2、用户点击（click）二级菜单，填入二级菜单内容;
3、用户点击三级菜单，填入三级菜单内容；
错误思路出现的问题：
1、二级菜单点击不能完全展开，需再次点击才能展开全部选项；
2、动态添加的选项不能正常选中；
html
<select class="select" id="firstCatalogue">
<option value="0">--选择一级目录（不选默认全部）--</option>
<option value="1">1级目录1</option>
<option value="2">1级目录2</option>
<option value="3">1级目录3</option>
</select>
<select class="select" id="secondCatalogue">
<option value="0">--选择二级目录（不选默认全部）--</option>
</select>
<select class="select" id="thirdCatalogue">
<option value="0">--选择三级目录（不选默认全部）--</option>
<option value="111">111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
js
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);
});