大家平时对下拉框并不陌生吧，平时我们的收索某些东西都有下拉框的存在，我们平时在淘宝啊，一些界面的登录和对一些条件的筛选，还有一些表格数据的显示都用到这个下拉框，它被使用的很频繁，那么问题来了，那些下拉框显示的数据从那里来呢？现在然我们开始吧
首选用MVC创建一个控制器添加视图
写上主要的页面搭建代码
----请选择----可能有人会想多些几个< option >,< select >里面的下拉框内容不就出来了吗,我们现在做的是吧数据库里面的数据绑定到这个下拉框里面,而不是这种
搭建好之后我们就去控制器那里写查询代码了
首先要导入数据库这里就不详细教了,不会的可以去查一下怎么导入
然后要在get下面实例化你导入的那个数据库, myModel自定义的名字, ExerciseEntities 你导入数据库的名字
public ActionResult SelectHappyType()
{
var listHappyType = from tbHobbyType in myModel.Exercise
select new
{
id =
tbHobbyType.ExerciseID,
text
= tbHobbyType.ExerciseName
};
return Json(listHappyType,
JsonRequestBehavior.AllowGet);
}
var listHappyType = from tbHobbyType in myModel.Exercise
from从哪里查你的数据
select new里面就是你要查询的内容
return Json(listHappyType,
JsonRequestBehavior.AllowGet);这个里面的listHappyType就是你要返回的内容
查询好了之后我们在转到视图这边写它的代码
现在开始绑定它的数据
$(function () {
var layer, layuiTable;//保存layui模块以便全局使用
appendOption(“sltHobby”, “SelectHappyType”);
//模态窗体中的学院下拉框
})
首先加载你的插件,然后写下面的事件
function appendOption(id,
url) {
$.getJSON(url,
function (data) {
$("#" + id).empty(); // 清空
$("#" + id).append(’----请选择----’);
$.each(data,
function (i) {
var str = ‘’ + data[i].text + ‘’;
$("#" + id).append(str);
});
});
}
appendOption就是绑定数据的JS方法,然后发别传入ID和URL,URL就是你在控制器里面写的方法,完成之后就可以启动,结果就出来了
效果图附上
数据库的数据