MVC+knocKout.js 实现下拉框级联
数据库:部门表和员工表
在控制器里面的操作:
public ActionResult Index3()
{
ViewBag.departments = new SelectList(getDepartments(),"d_id","d_name");//部门数据
return View();
} private List<department> getDepartments()
{
List<department> list = db.department.ToList();
return list;
} public JsonResult GetEmployye(int departmentId)
{
//通过部门id,获取该部门的员工
var list= db.employee.Where(a => a.e_d_id == departmentId).ToList().Select(a => new SelectListItem(){Text = a.e_name,Value = a.e_id+""}); return Json(list,JsonRequestBehavior.AllowGet);
}
html里面的实现:
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/knockout-2.2.0.debug.js"></script>
<title>Index3</title>
</head>
<body>
<div>
<p>选择部门:@Html.DropDownList("department",ViewBag.departments as SelectList,"请选择",new{onchange="searchEmployee();"})
</p>
<p data-bind="visible: selectOptions().length > 0"></p>
<b style="color:#0094ff">员工:</b>
<select data-bind="options: selectOptions, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '请选择'"></select>
</div>
</body>
<script type="text/javascript">
function ViewModel() {
this.selectOptions = ko.observableArray([]); } var vm = new ViewModel();
ko.applyBindings(vm); function searchEmployee() {
var id = $("#department").val();
$.getJSON(
"@Url.Action("GetEmployye")",
{ departmentId: id },
function (data) {
vm.selectOptions(data);
});
}
</script>
</html>
效果:
MVC+knocKout.js 实现下拉框级联的更多相关文章
- [转]html 下拉框级联
<html> <head> <title>html 下拉框级联</title> <meta charset="UTF-8"/& ...
- MVC实现多选下拉框,保存并显示多选项
在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...
- js改变下拉框内容
js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...
- Js获取下拉框选定项的值和文本
Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...
- JS模拟下拉框select
最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- JS 实现下拉框去重
JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...
- JS 实现下拉框回显
JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...
- MVC实现多选下拉框
借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: 考虑到多选下拉<select multiple="multiple" ...
随机推荐
- ios升级<注:来着微信平台>
<来着微信平台> http://mp.weixin.qq.com/s?__biz=MjM5NTIyNTUyMQ==&mid=2709545194&idx=1&sn ...
- NSMutableAttributedString(转)
NSMutableAttributedString计算高度的问题 _label_page2_1 = [[UILabel alloc] init]; _label_page2_1.numberOfLin ...
- mvc+webapi 项目架构
首先项目是mvc5+webapi2.0+orm-dapper+ef codefirst+redis+quartz.net+actionmq. 1.项目框架层次结构: 这个mvc项目根据不同的业务和功能 ...
- 51nod1088(最长回文子串)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1088 题意: 中文题目诶~ 思路: 这道题字符串长度限定为1 ...
- LeetCode之171. Excel Sheet Column Number
---------------------------------- 乘权相加即可. AC代码:(从右往左) public class Solution { public int titleToNum ...
- VS2012 自动为类文件添加头注释
1. 打开文件夹 %VS110COMNTOOLS%..\IDE\ItemTemplates\CSharp\Code\1033\Class 2. 打开 Class.cs 文件,在其中添加 public ...
- 在SOUI中非半透明窗口如何实现圆角窗口?
如果SOUI的宿主窗口没有包含子窗口,直接使用窗口的半透明属性:translucent=1就可以解决了,整个窗口形状完全由背景图决定,可以实现完美的圆角. 然后窗口半透明时,窗口中的子窗口(非SWin ...
- python 线程之 threading(四)
python 线程之 threading(三) http://www.cnblogs.com/someoneHan/p/6213100.html中对Event做了简单的介绍. 但是如果线程打算一遍一遍 ...
- 关于HTML5的拖拽
不介绍具体情况,先看API,注意看后面括号的说明 dragstart:拖拽开始(应用于被拖拽对象) drag:拖拽中(应用于被拖拽对象) dragenter:拖拽到指定位置(应用于拖拽目标) drag ...
- WPF中的动画——(三)时间线(TimeLine)
WPF中的动画——(三)时间线(TimeLine) 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下 ...