下拉框

下拉框

做项目，都会用到一些下来框，下拉框方便我们知道数据库里有什么数据，根据数据库查询出来，把数据绑定到下拉框，点击下来框，我们就可以把数据库里的数据在下拉框那里显示出来
现在我就要把数据库里的AcademeName这列数据，通过下拉框的方式，按照AcademeID的顺序把它显示出来

在cshtml把下来框的样式写出来

<label class="col-form-label mr-2" for="searchAcademeID">学院</label>
<select id="searchAcademeID" 
class="form-control form-control-sm mr-3 col-sm-2 col-md-1"></select>

“for” 属性可把 label 绑定到select 下拉框标签里
<label>学院</label>就式绑定到下拉框显示的名字
意思就是在学院后面放一个（<select></select>标签）下拉框
通过

<label></label>
<select></select>

这两个标签，还有里面的css样式，页面上的效果如下

这样下来框是没有数据的，
通常我们都是通过<option></option>这个标签来绑定下拉框里面的内容，
创建带有 4 个选项的下拉框：

<label class="col-form-label mr-2" for="searchAcademeID">学院</label>
<select for="searchAcademeID" 
class="form-control form-control-sm mr-3 col-sm-2 col-md-1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

接下来就是查询出数据库的有哪些学院名称，查询出来值后，再把数据放到
<select></select>这个标签里面，这样就把数据绑定到学院这个下来框里面，点击下拉框，下拉框就会把数据库里的数据，通过下拉框的性式给展示出来

写一个绑定下拉框方法，方法名为createSelect
createSelect方法有三个变量
第一个变量selectId 是写需要绑定下来框的ID
第二个变量url 是写查询下拉框的url路径， url路径需要在控制器那里写
第三个变量 是回填数据时要的，现在的下啦框不用

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

根据createSelect方法，
第一个值"searchAcademeID"是写样式时写下拉框时加的ID
第二个值"selectAcademe"是控制器里写的方法
createSelect(“searchAcademeID”, “selectAcademe”);

写控制器方法前先建一个实体类，只要方便查询数据库里的下拉框数据是，方便选中id，显示id对应的值

public class SelectVo
    {
        /// <summary>
        /// 选中值
        /// </summary>
        public int id { get; set; }
        /// <summary>
        /// 显示值
        /// </summary>
        public string text { get; set; }
    }

写下拉框跳转的控制器方法

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);
}

这样下拉框就写好了