四级联动框实现筛选查询

联动框是我们经常会用到的一个小功能，比较方便简单，但我们这里要在数据库里查询筛选数据，所以会有一点点不太一样，但原理还是不变，两级联动以及我们现在说的四级联动或者更多级，总的来说原理都是一样的，这只是个代码量的问题。

原理和要点：根据前一个（或第一个）下拉框中选择到的内容作为条件拿到数据库中进行搜索查询，查询到后返回数据，但要注意如果是作为回填数据的下拉框需要将异步传输改为同步传输（$.ajaxSettings.async = false;），因为异步传输是同时进行的，所以就会出现前面的数据返回值还没有查询到后面的已经处理完了，这样的结果就是回填数据时后面的数据为空，但在控制台输出返回值却有数据，而同步传输是按前后顺序进行的；

• 封装JS函数

function select(url, id, Data) {     $.get(url, Data, function (data) {         var str = "";         $.each(data, function (index, value) {             str += '<option value="'+ value.id+'">'+value.text+'</option>'         })         $("#"+id).empty();         $("#"+id).append('<option value="0">…请选择…</option>' + str)     }) };

由于我们要做四级联动，而且JS代码基本都是一样的，所以为了方便使用我们封装一个函数，并传给它三个值，分别是控制器方法的地址、和下拉框的ID、还有前一个选择到的条件ID（指的是数据库中给的ID）传的时候要以键值对的形式，如果是第一个下拉框则不需要传第三个参数，传前两个就行；

//模态框学院联动专业         function ganged() {             var StudentIDTxt = $("#selectM1").val();           //调用刚刚封装的函数  //控制器中的地址   //下拉框ID  //传到方法的名称：前一个的ID             select("/BaselnfoManage/Grade/inquire", "selectM2", { AcademyId: StudentIDTxt });             MajorInGrade();         }         //模态框专业联动年级         function MajorInGrade() {             var StudentIDTxt = $("#selectM2").val();             select("/BaselnfoManage/Class/MajorInGrade", "selectM3", { MajorId: StudentIDTxt });             GradeInClass();         }         //模态框年级联动班级         function GradeInClass() {             var selectMajor = $("#selectM3").val();             select("/BaselnfoManage/Student/GradeInClass", "selectM4", { GradeId: selectMajor });         }

要注意的是传到控制器的名称一定要一致

#region 年级联动班级         public ActionResult GradeInClass(int? GradeId)         {               //创建变量将数据库中表格的外键等于传来的ID作为条件用了查询             var GradeCount = myModel.Class.Where(o => o.GradeID == GradeId);             var GradeInClass = from tb in GradeCount                                select new                                { //重命名方便前面封装的函数回填数据                                    id = tb.ClassID,                                    text=tb.ClassName                                };             return Json(GradeInClass,JsonRequestBehavior.AllowGet);         }         #endregion

想要实现筛选数据只需要在查询数据库数据时添加一个判断语句

if(GradeId != null&& GradeId > 0)

            {

                StudentLing = StudentLing.Where(o => o.GradeID == GradeId);

            }

如果还有什么疑问可以留言，我能解答的都会一一解答，如果有更好的方法也欢迎评论留言，感谢！