AJAX异步请求二级联动加载下拉框

最近在开发中用到的二级联动加载下拉框，感受比较有意思，记录一下。

• 首先，二级联动下拉框的数据库建模是至少两张表以上的外键关联查询，首先准备数据库表格

        

• 数据库表以及数据准备好事后，开始开发前端页面（前提是整个项目环境搭建好的状况下，此项目使用IDEA开发）

咱们的需求是经过选择第一个下拉框的时候，第二个下拉框自动加载属于第一个下拉框的集合，

因此，这个时候怎么才能加载呢？无非是根据第一个下拉框的某个属性值去查询第二张表的属性集合

这个时候思路就出来了，首先页面加载的时候发送AJAX请求到后台查询第一个下拉框的值

前台代码：

$(function () {
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getTypes",
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=ptype]").append("<option value='"+result[i].tid+"'>"+result[i].tname+"</option>")
                    }
                }
            })
        })

后台代码：

此时第一个下拉框已经准备好了，到了最关键的一步，根据第一个选中的下拉框值去数据库查询匹配的数据集合（这里是绑定select标签onchange事件的方式）

function getProducts() {
            var id=$("[name=ptype]").val();
            $("[name=pid]").empty();
            $("[name=pid]").append("<option >请选择</option>")
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/product/getMappingProducts",
                data:{"id":id},
                dataType:"json",
                success:function (result) {
                    for(var i=0;i<result.length;i++){
                        $("[name=pid]").append("<option value='"+result[i].pid+"'>"+result[i].ptitle+"</option>")
                    }
                }
            })
        }

为何咱们能获取到第一个下拉框的id呢？

这里有一个巧妙的思想，在加载第一个下拉框的时候，在每一个option标签中隐藏一个value属性（把id藏进去），那么经过标签.val函数就能获取到value属性值了

到这里其实已经完成了大部分工做，下面就是根据请求参数查询回显数据了

后台代码：

到这一步功能已经实现！

只要掌握了二级联动下拉框加载，三级四级同理也能够类似方式实现！