绑定下拉框数据

开发工具与关键技术：DW、绑定下拉框数据

作者：陆桂超

撰写时间：2019年5月15日

下拉框是设计页面时经常用到的，这时就可以用到select标签。在数据输入时，往往会有某些数据只供用户选择，这时就需要用到下拉框，那么下拉框的数据是如何绑定的呢？下面我用的是VS2015开发工具，MVC框架，C#语言讲解下拉框数据的绑定。

1、 首先在HTML部分把下拉框构建出来。

这里通过学院下拉框为例。label标签是下拉框的标题。select标签就是下拉框标签，select标签设置id，该id在数据绑定时要用到。

2、 第一步已经把下拉框布局好，第二步就到控制器查询数据。

在写查询之前，首先准备一个类，以方便查询数据。

在创建好上图那个实体类后，接下来就写查询语句。

//查询数据

public ActionResult selectAcademe()

{

    List<SelectVo> listAcademe = (from tbAcademe in myModels.SYS_Academe

                                  select new SelectVo

                                  { id =

tbAcademe.AcademeID,

                                    text =

tbAcademe.AcademeName

}).ToList();

     return Json(listAcademe, JsonRequestBehavior.AllowGet);

}

通过查询语句获取学院的ID和名称。

3、绑定数据。

把数据查询到后，下一步就是把数据绑定到下拉框。

$.get("selectAcademe ", function (data) {

 $.each(data, function (k){

 $("#AcademeID").append('<option

value="’ +
data[k].id + ‘">’ + data[k].text + ‘’);

            })

        });

这里用到get和each函数绑定数据，这个get和each是jquery-3.2.1.min.js封装好的一个函数，因此在使用前先引用jquery-3.2.1.min.js脚本文件。selectAcademe是数据路径，data用于获取数据，是一个数组。K是数组的下标。AcademeID是select下拉框的id，value指的是获取值，在这里不会显示出来，这里显示的是text文本值。这样我们就可以通过下拉框选择数据了。