Select下拉框数据的查询以及绑定

下拉框，也就是我们在搭建页面时经常会遇到的< select >标签，select标签通常和一起使用，一个作为下拉框一个则为其中的选择项。但到了自己做项目的时候才发现，< option >标签根本就用不上。在制作页面时，其中大部分的下拉框中的数据都是通过控制器中的Linq小查询方法查询出来的，其中的选项数据在控制器中被获取到后，再通过封装好的方法再绑定到下拉框中供用户查看&选择。以至于手打的option标签根本就用不上，那么如何将查询到的数据成功绑定到下拉框标签当中呢?

如图例，左侧为此次的演示下拉框，右侧则是为它绑定上数据后的效果图：

首先，我们需要定义好绑定下拉框数据的方法，暂且命名为bindingSelect()，该方法有三个参数，分别是(需要绑定的下拉框id值【selectid】，相关的控制器Linq查询方法【url】，设置option的id值【value】)，让我们来看看代码结构：

function bindingSelect(selectId, url, value) {
    $.post(url, function (jsonData) {
        if (selectId.indexOf('#') != 0) {
            selectId = '#' + selectId;
      }
        $(selectId).empty();//清空该元素
        for (k in jsonData) {//创建option
$(selectId).append('<option value="' + jsonData[k].id + '">' + jsonData[k].text + '</option>');
      }
        //设置选中值
        if (value != undefined && value != null && value != '') {
            $(selectId).val(value);
        }
    });
}

每个由此方法拼接的选项都有着唯一的选中值&显示值，选中值就相当于是数据库中自段的id值，而显示值即为数据本身，这两个值在控制器的方法中便要查询出来。
在定义好页面的方法后，先不着急写查询方法。在前面提到的选中值(id)，以及显示值(text)，是通过一个数据接收实体类来获取的，那么我们现在要做的便是先将该实体类定义好，实体类命名为< SelectVo >:

定义好< SelectVo >后，让我们将目光移到控制器，运用创建好的实体类对查询出来的数据进行处理后再返回至页面中：

//<制单人>下拉框查询
public ActionResult selectZhiDanRen()
{
//查询数据
 List<SelectVo> listZhiDanRen = (from tbEmployee in myMondel.S_Employee
                                join tbEmployeeType in myMondel.S_EmployeeType on tbEmployee.EmployeeTypeID equals tbEmployeeType.EmployeeTypeID
                                select new SelectVo
                                {
                                     //id = 选中值
                                     id = tbEmployee.EmployeeID,
                                     //text = 文本显示值
                                     text = tbEmployeeType.EmployeeType,
                                 }).ToList();
   return Json(listZhiDanRen, JsonRequestBehavior.AllowGet);
}

最后，来到页面这边，调用已定义好的数据绑定方法，在小括号中填入参数：

//绑定"制单人"下拉框
createSelect("ZhiDanRen", "selectZhiDanRen");

绑定后启动项目查看是否成功，上图：

大功告成！数据绑定成功且无异常。