如何实现下拉框的绑定

开发工具与关键技术：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，第二个写的是路径，第三个是回填下拉框用的，不需要会填数据的时候不用写。
最最后，我给你们看一下效果图。
效果图：

如何实现下拉框的绑定相关推荐

dataGridview与下拉框高级绑定
//在dataGridView里批量显示所有数据string sql = "select * from mingxing";SqlConnection con = new SqlC ...
Layui下拉框的绑定
开发工具与关键技术:mvc.layui.js.html 作者:张俊辉撰写时间:2019年04月8日对于Layui表单中的表单下拉框绑定中,我们会发现绑定上去了却没显示出来,那是因为你绑定的下拉框与 ...
下拉框combox绑定后该如何获取combox当前显示的值
在下小白,找了一个下午.具体情况就是:我已经绑定了combox的值.值是我利用sql语句从数据库里取出来的.然后就是用combox动态绑定去获取值嘛:如图然后就是下面的结果.值已经进入到combox ...
MVVM下拉框绑定触发事件
开发工具与关键技术:MVVM 撰写时间:2021年06月15日在MVVM中下拉框的绑定跟MVC的下拉框绑定基本一样,只不过在MVVM中要写多一步声明下拉框的属性来接收数据. 首先我们要在DAL层写查 ...
Ext 下拉框联动第一次显示不正常的问题
做下拉框联动,异步加载数据,第一次显示时数据不准确,不要在combo_2的下拉框直接绑定store,在combo_1的改变事件里调用下面的方法 function GetAllCustomerBrand ...
高级查询组件下拉框联动（三）
实现下拉框联动例子. 1.首先在ul中定义省份和城市查询条件. <ul id="dynamicCondition" style="display:none;&quo ...
Dorado7 自定义下拉框（二）
本篇对DataSetDropDown下拉框进行讲解: 这里以车号下拉框进行讲解,最终效果如图: 1.首先创建相应的DataType和DataSet,添加DataSetDropDown下拉框,绑定相应的 ...
html下拉列表框做日期,几种常用的控件（下拉框可选框起止日期在HTML页面直接读取当前时间）...
下拉框状态 ----请选择---- 制单已提交已审核可选框 value="Y" checked="checked" id="isValid&q ...
商品类型的下拉框绑定一个事件，通过ajax获取属性
html代码这么写  <table cellspacing="1" cellpadding="3" width=&q ...

如何实现下拉框的绑定

如何实现下拉框的绑定相关推荐

最新文章

热门文章