開發工具與關鍵技術：Visual Studio、MVC 作者：幻奏 撰寫時間：2019.7.5

下拉框你們都見過吧，下拉框的作用是方便用戶更快的輸入，同時也限制了用戶，再也不怕用戶亂寫啦。
下拉框我們該如何綁定呢，這個我們先從它的html開始，先來了解一下證件類型下拉框的HTML的是如何寫的吧！

<div class="form-group form-row m-0"><label class="col-form-label col-lg-5">證件類型:</label><div class="col-lg-6"><select class="form-control" id="PapersType" name="PapersType" style="height:30px;width:100px;padding: 0;"></select></div></div>

我們HTML就這樣了，我們再封裝一下js的方法，然后引入到你的項目里面。

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

然后我們再寫一個實體類，存儲我們查詢到的數據。

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

我們還需要一個實體類拼接“請選擇”。

public class Tools{public static List<SelectVo> SetSelectJson (List<SelectVo> select){//創建列表對象List<SelectVo> list = new List<SelectVo>();//創建實體對象SelectVo SelectVo = new SelectVo{id = 0,text = "請選擇"};//將實體對象添加到對象列表list.Add(SelectVo);//將數據集添加到對象列表list.AddRange(select);return list;}}

準備工作我們都完成了，接下來就是控制器的寫法了。

/// <summary>/// 證件類型下拉框/// </summary>/// <returns></returns>public ActionResult selectPapersType(){List<SelectVo> listPapersType = (from tbPapersType in myModel.S_PapersTypeselect new SelectVo{id = tbPapersType.PapersTypeID,text = tbPapersType.PapersType}).ToList();//拼接選擇項listPapersType = Common.Tools.SetSelectJson(listPapersType);return Json(listPapersType, JsonRequestBehavior.AllowGet);}

最后，我們回到視圖那里調用它的方法。
createSelect(“PapersType”, “/Main/selectPapersType”, data.PapersTypeID);
括號里面第一個寫的是ID，第二個寫的是路徑，第三個是回填下拉框用的，不需要會填數據的時候不用寫。
最最后，我給你們看一下效果圖。
效果圖：

總結

以上是生活随笔為你收集整理的如何实现下拉框的绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。