两个下拉框联动 ajax,AJAX异步请求二级联动加载下拉框

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

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

数据库表以及数据准备好过后，开始开发前端页面(前提是整个项目环境搭建好的情况下，此项目使用IDEA开发)

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

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

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

前台代码：

$(function () {

$.ajax({

type:"post",

url:"${pageContext.request.contextPath}/product/getTypes",

dataType:"json",

success:function (result) {

for(var i=0;i

$("[name=ptype]").append(""+result[i].tname+"")

}

}

})

})

后台代码：

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

function getProducts() {

var id=$("[name=ptype]").val();

$("[name=pid]").empty();

$("[name=pid]").append("请选择")

$.ajax({

type:"post",

url:"${pageContext.request.contextPath}/product/getMappingProducts",

data:{"id":id},

dataType:"json",

success:function (result) {

for(var i=0;i

$("[name=pid]").append(""+result[i].ptitle+"")

}

}

})

}

为什么我们能获取到第一个下拉框的id呢？

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

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

后台代码：

到这一步功能已经实现！

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