绑定下拉的基本方法_<igdp:field 绑定下拉-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44546735/article/details/90294229

博客介绍了下拉框的绑定方法。一是将内容放入option标签，与select元素配合使用，可通过class属性设置样式；二是通过数据库查询信息，用js绑定下拉框，给出控制器查询、页面布局及jquery绑定代码；还可引用layui下拉框样式实现效果，并给出相关代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定下拉的基本方法

开发工具与关键技术：
作者：熊琪
撰写时间：2019.05.16

实现下拉框有很多种方发，比如基本的可以将需要下拉的内容放入option标签当中option元素自定义下拉列表中的一个选项，浏览器将option标签中的内容作为select标签的菜单或是滚动列表中的一个元素显示option元素位于select元素内部，且必须与select元素配合使用，否则这个标签是没有意
义的。
Select元素可创建菜单或多选菜单，select元素是一种表单控件，可用于在表单中接收用户输入，所以比如登陆时选择登陆类型时可以用到该元素。这里也可以通过标签的class属性来设置下拉框的大小位置等。
在这里插入图片描述
效果实现图：

除了使用这种下拉框之外还可以通过数据库查询信息在通过js来绑定下拉框，比如需要将数据库中角色表绑定到页面的下拉框当中，控制器查询代码：

public ActionResult Userrole()
           {
            var listUserrole = myModel.S_Role.
                Select(m => new { id = m.RoleID, text = m.RoleName }).ToList();
            return Json(listUserrole, JsonRequestBehavior.AllowGet);
       }

方法名称Userrole 声明变量接收查询的数据，最后返回变量。
页面布局样式代码：

最后jquery写法绑定下拉框代码：

$(document).ready(function () {
            $.get("Userrole", function (data) {
                $.each(data, function (i) {
                    $("#Userrole").append('<option value="' + data[i].id + '">' + data[i].text + '</option>');
                });
            });
        });

Get请求路经，填之前写的方法名称，#Userrole是需要绑定元素的ID, append意思是在被选元素的结尾插入内容。
除了这个以外还可以用一种方法可以引用layui的下拉框样式来实现。比如实现以下效果：
在这里插入图片描述
先引入layui的css样式和js样式，然后代码如下：

<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>

lay-verify：注册form模块需要验证的类型。