下拉框绑定

开发工具与关键技术：vs mvc
作者：朱某人
撰写时间：2019年5月5 日

在一些网站中时常能见到下拉框，比如百度、360搜索之类的，在这里就写一下下拉框的绑定。因为接触不久，所以会有很多解释模糊的地方，在搜索引擎中的下拉框是用来保存搜素的关键字或者一些热点链接。在一些网页中是用来根据条件筛选的。
最近学习的一个项目中就有着大量的下拉框查询。下拉框的出现是通过特定的信息查询出来更快的找到你所需要的那些数据，节省时间。下拉框一般出现在数据量特别多的时候做筛选。一般的筛选都是利用关键字来筛选，下拉框通过筛选已含有的数据信息来选择查询，是根据条件查询的。
还是说回我学习的项目吧，这是一个大学里关于安全教育的一个平台。涉及到许多数据，有学院、年级、班级之类的信息。由于数据量多就有了很多的下拉框来筛选数据。首先封装了一个关于下拉框的方法。
function xialakuang(selectId, url, value) {
$.post(url, function (jsonData) {
if (selectId.indexOf(’#’) != 0) {
selectId = ‘#’ + selectId;} $(selectId).empty();//清空该元素
//内部前置内容
$(selectId).prepend(’’ + “–请选择–” + ‘’);
//创建option for (k in jsonData) {
$(selectId).append(’’ + jsonData[k].text + ‘’);}
//设置选中值
if (value != undefined && value != null && value != ‘’) {
$(selectId).val(value); }})}
根据url创建下拉框，在方法里给了三个参数，第一个是form表单select的id，第二个是URL链接，链接到方法，第三个是设置值。下拉框里的内容有两个：一个是自定义的，是上面内部前置内容“请选择”作为0，然后第二个就是数据库里的数据信息。
用到的时候直接引用xialakuang（id，url，value）就可以了，这样一来可以省下不少的代码。
这个是还没绑定的下拉框样式：可以看到是没有数据的。

因为用到的是数据库里的信息，所以需要在控制器写入相对应的方法（用的是vs MVC），得先确认用到的表是什么，再去写方法。第一是学院：
public ActionResult Selectxueyuan ()
{List listxueyuan = (from tbxueyuan in myModels.SYS_xueyuan
select new Select{
id = tbxueyuan. xueyuanID,
text = tbxueyuan. xueyuanName}).ToList();
return Json(listxueyuan, JsonRequestBehavior.AllowGet);}
就是一个linq的单表查询直接查询学院的ID和学院名称，因为是表所以用了list接收。Select是自己定义的实体类的表。因为是要绑定下拉框的，而又封装好的下拉框绑定方法里需要的id和text。所以就需要重命名成封装好的下拉框方法里的id和text。就是这么的一个操作。
还有后面的年级要查询，但不是像学院这样查询，它是通过学院ID而去筛选的年级。就比如A学院只有2017和2018级但是B学院有2017、2018和2019级，你切换成B学院是不能只有17和18，你还得显示出19级的。
这时候年级查询就是有条件。用学院ID作为外键ID来查询年级，但它又不是查询所有的学院年级号，是你选择的学院所对应的那个年级。（好像太啰嗦了），还是要在控制器上写入方法查询。
public ActionResult Selectnianji(int xueyuanID ){
List listGrade = (from tbGrade in myModels.SYS_Grade
where tbGrade. xueyuanID == xueyuanID
select new Select{
id = tbGrade.GradeID,
text = tbGrade.GradeName}).ToList();
return Json(listGrade, JsonRequestBehavior.AllowGet); }
和学院查询比较就是多了个where条件。还有一个班级查询就是比年级查询多了一些if else的判断，判断年级id是否等于0。那么方法就写好了。
那么查询是通过选中的条件去点击触发查询按钮来完成的。就要个按钮一个单击事件，写个函数。下拉框也是在这函数里进行绑定的。
function loadSearchSelect() {
//学院下拉框数据绑定，触发年级下拉框数据绑定
$("#searchAcademeID").change(function () {
//获取选中的学院ID
var academeId = $("#searchAcademeID").val();
//绑定年级下拉框数据
xialakuang (“searchGradeID”, “/ExaminationManagement/SetExaminee/SelectGrade?AcademeID=” + academeId);
//当重新选择学院的时候，班级下拉框需要清空，等年级信息绑定的时候再绑定班级数据
$("#searchClassID").empty(); });
//年级下拉框数据绑定，触发班级下拉框数据绑定
$("#searchGradeID").change(function () {
//获取选中的年级ID
var gradeId = $("#searchGradeID").val();
//班级下拉框数据绑定
xialakuang (“searchClassID”, “/ExaminationManagement/SetExaminee/SelectClass?GradeID=” + gradeId + “&specialtyId=0”);
});
//学院下拉框绑定
xialakuang (“searchAcademeID”, “/ExaminationManagement/SetExaminee/SelectAcademe”);}
首先是获取from表单了select的ID，然后再链接上方法。在绑定班级的代码中，specialtyId这个是代表专业ID，因为在数据库里的班级表上有很多的外键ID，所以在上面提到在写控制器方法时给了判断。在页面上没用到专业就给它一个0，也是封装了方法就直接调用，代码量减少了，也便捷了很多。
就看一下效果图：

具体就是这么的效果，只要在按着顺序选择就会出现相应的信息，如果你直接去看年级而跳过学院它是不会有显示的。你没选中时，它显示的就是我自定义的“请选择”。我知道还是有更好的方法来完成下拉框绑定，但这是我当前学到的，就写出来分享下，谢谢阅读。