改变下拉框事件

开发工具与关键技术：mvc

作者：黄志鹏

撰写时间：2019/5/2

我们在做项目的时候经常用到根据下拉框的内容来查询数据，下面我们来说说下拉框的改变事件。首先我们在页面那边把需要的下拉框给写出来，然后我们就开始写查询的代码了，

我们先来看看需要的样式结果

我们需要的结果是当我们点击学院下拉框时会查询出相应的内容，与此同时会触发年级的下拉框令其查询出相应的内容，点击年级下拉框会触发班级下拉框，令其查询出相应的内容。

接下来我们需要做的是先查询出学院下拉框的数据，我们开始写查询出学院下拉框数据的代码，

public ActionResult SelectAcademe()

    {

        List<Select> ListAcademe = (from tbAcademe in

myModels.SYS_Academe

          select new Select

                                    {

                                        id

= tbAcademe.AcademeID,

text = tbAcademe.AcademeName

                                    }).ToList();

        return Json(ListAcademe, JsonRequestBehavior.AllowGet);

    }

这是一个单表查询，

首先，我们先说说为什么用List，因为我们查询的是多个字段，所以我们有一个列表来接收。

< Select >里面封装了两个字段，一个是Int类型的ID，一个是string类型的名称。

ListAcademe是查询方法的命名，form后面跟是范围变量。tbAcademe用来接收查询出来的数据命名。Models是之前实例化的一个数据（Models.CQUPTEntities myModel = new Models.CQUPTEntities();）Select是查询语句 后面跟 new的关键字。

id = tbAcademe.AcademeID,

text = tbAcademe.AcademeName

这俩句是赋值的意思。为什么要加ToList,因为 “List< Select > ListAcademe =”是一个list的集合，后面是一段查询的语句，所以要加一个ToList。

后面的单表查询的大致内容也基本相同，查询出数据后我们可以去视图那边把数据给渲染出来，

我们先来封装一个绑定下拉框的方法

function appendOption(id, url) {

$.getJSON(url, function

(data) {

    $("#" +id).empty();


    $("#" +id).append("<option value=" + 0 + ">" + "----请选择----" + "</option>");

$.each(data, function (i) {

        $("#" +id).append("<option value=" + data[i].id + ">" +data[i].text + "</option>");



    });

});

}

接下来我们要绑定下拉框的时候直接调用这个方法就可以了。代码如下：

appendOption (“searchAcademeID”, “/ExaminationManagement/SetExaminee/SelectAcademe”);

searchAcademeID代表的是当前下拉框的ID，/ExaminationManagement/SetExaminee /SelectAcademe则表示查询的路径

接下来我们绑定年级下拉框，我们先要查询出年级下拉框的数据，其中也是一个单表查询，代码如下：

public ActionResult SelectGrade(int AcademeID)

    {

        List<Select> ListGrade = (from tbGrade in myModels.SYS_Grade

                                  where tbGrade.AcademeID== AcademeID


                                  select new Select

                                  {

                                      id =tbGrade.GradeID,
                                      text=tbGrade.GradeName

}).ToList();

        return Json(ListGrade, JsonRequestBehavior.AllowGet);

    }

完成这一步后我们可以来写点击学院下拉框来触发年级下拉框的内容，

接下来我们来写学院下拉框数据绑定，触发年级下拉框数据绑定的函数，代码如下：

            $("#searchAcademeID").change(function ()

{

var academeId = $("#searchAcademeID").val();

createSelect(“searchGradeID”,"/ExaminationManagement/SetExaminee/SelectGrade?academeId=" +
academeId);

$("#searchClassID").empty()

}

我们根据学院下拉框的ID写一个改变事件。我们首先获取选中的学院ID，接下来调createSelect方法来写绑定年级下拉框的事件，$("#searchClassID").empty();意思是当重新选择学院的时候，班级下拉框需要清空，等年级信息绑定的时候再绑定班级数据

接下来我们来查询对应年级和专业下的班级信息(下拉框)的数据，代码如下：

ListClass = (from
tbClass in myModels.SYS_Class

                         where

tbClass.GradeID == GradeID &&

tbClass.SpecialtyID == specialtyID

                         select new Select

                         {

                             id =tbClass.ClassID,


                             text =tbClass.ClassName


                         }).ToList();

查询出数据后我们在页面那边绑定下拉框我们需要的是年级下拉框数据绑定，触发班级下拉框数据绑定

            $("#searchGradeID").change(function () {

var gradeId = $("#searchGradeID").val();

createSelect(“searchClassID”, “/ExaminationManagement/SetExaminee/SelectClass?GradeID=” +
gradeId + “&specialtyId=0”);

            });

意思跟点击学院下拉框来触发年级下拉框的内容一样，

下面是总体的样式截图：