JQuery 三级联动

1、首先要写一个jps代码片段：这里给它取名为 link_chain.jsp

<%@page pageEncoding="utf-8"%>
<select class="form-control" id="select_1" name="select1" >
</select>
<select class="form-control" id="select_2" name="select2" >
    <option value="0">请选择</option>
</select>
<select class="form-control" id="select_3" name="select3" >
    <option value="0">请选择</option>
</select>

2、然后再写一个js脚本：命名为：link_chain.js

$.fn.linkselect = function (options) {
    var select = $(this);
    var url = options.url;//获取数据的链接
    var value = options.value;//初始化需要选中的数据
    var parentId = options.parentId;//初始化需要选中的数据
    var depth = options.depth;//层级，默认为3

    $.post(url, {"parentId": parentId}, function (result) {
        select.find("option").remove();
        select.append("<option value=''>请选择</option>");

        var array = [];
        var mySel = select.attr("id");
        if (mySel != undefined) {
            array = mySel.split("_");
        }
        var index = parseInt(array[1]) - 1;
        for (i in result) {
            var obj = result[i];
            var id = obj.id;
            var name = obj.name;

            if (id == value[index]) {
                select.append("<option value=" + id + " selected>" + name + "</option>");
            } else {
                select.append("<option value=" + id + " >" + name + "</option>");
            }
        }
        //onchange事件，改变后面select的值
        select.change(function () {
            var thisId = $(this).attr("id").split("_");
            var nextId = parseInt(thisId[1]) + 1;
            var next = $("#" + thisId[0] + "_" + nextId);

            //选项改变，清空后面下拉框
            if (depth == undefined) {
                depth = 3;
            }
            for (var childPos = parseInt(thisId[1]) + 1; childPos <= depth; childPos++) {
                var child = $("#" + thisId[0] + "_" + childPos);
                if (child != undefined) {
                    child.find("option").remove();
                    child.append("<option value=''>请选择</option>");
                }
            }

            var selectedValue = $(this).val();
            if (next && selectedValue) {
                next.linkselect({
                    url: url,
                    value: value,
                    parentId: selectedValue
                });
            }
        });
        //设置后面select的值
        select.change();
    });
};

3、在link_chain.jsp中引入这个js:

<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/link_chain.js"></script>

4、接下来就可以将这个jsp文件直接放在需要使用联动插件的地方了：

<%@ include file="/common/link_select.jsp" %>

5、一般下拉框都会有个初始值，在当前引入link_select.jsp的页面做一些初始化工作：

<script>
$(function () {
        //页面加载完成后执行
        document.onreadystatechange = function () {
            if (document.readyState == "complete") {              
                initData();
            }
        };
		function initData() {
			 var value = [];
			 value.push('${data1}');
			 value.push('${data2}');
			 value.push('${data3}');
			  $("#select_1").linkselect({
                url: basePath + '/data',                
                value: value,
                parentId: ""
            });
		};
});
</script>

6、最后的最后，贴下请求的数据返回值的数据结构：（它和一般的省市级三级联动的数据结构不太一样）

其实原博主已经写的很详细了，只是我拿来用时候发现不适合，故在此记录下以便后面用到时候过来复习。里面的递归调用并没有完全理解，目前这个改动，除了适合3级联动，在value和path处稍作修改，也适合N级联动。 

原博主文章出处：https://blog.csdn.net/dwl0208/article/details/82716112