数据库：部门表和员工表

在控制器里面的操作：

  1.  public ActionResult Index3()
  2.          {
  3.              ViewBag.departments = new SelectList(getDepartments(),"d_id","d_name");//部门数据
  4.              return View();
  5.          }
  6.  
  7.          private List<department> getDepartments()
  8.          {
  9.              List<department> list = db.department.ToList();
  10.              return list;
  11.          }
  12.  
  13.          public JsonResult GetEmployye(int departmentId)
  14.          {
  15.             //通过部门id，获取该部门的员工
  16.                var list= db.employee.Where(a => a.e_d_id == departmentId).ToList().Select(a => new SelectListItem(){Text = a.e_name,Value = a.e_id+""});
  17.  
  18.              return Json(list,JsonRequestBehavior.AllowGet);
  19.          }

html里面的实现：

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6.  
  7. <html>
  8. <head>
  9.     <meta name="viewport" content="width=device-width" />
  10.     <script src="~/Scripts/jquery-1.8.2.min.js"></script>
  11.     <script src="~/Scripts/knockout-2.2.0.debug.js"></script>
  12.     <title>Index3</title>
  13. </head>
  14.     <body>
  15.         <div>
  16.             <p>选择部门：@Html.DropDownList("department",ViewBag.departments as SelectList,"请选择",new{onchange="searchEmployee();"})
  17.             </p>
  18.             <p data-bind="visible: selectOptions().length > 0"></p>
  19.             <b style="color:#0094ff">员工：</b>
  20.             <select data-bind="options: selectOptions, optionsText: 'Text', optionsValue: 'Value', optionsCaption: '请选择'"></select>
  21.         </div>
  22.     </body>
  23.     <script type="text/javascript">
  24.         function ViewModel() {
  25.             this.selectOptions = ko.observableArray([]);
  26.  
  27.         }
  28.  
  29.         var vm = new ViewModel();
  30.         ko.applyBindings(vm);
  31.  
  32.         function searchEmployee() {
  33.             var id = $("#department").val();
  34.             $.getJSON(
  35.                 "@Url.Action("GetEmployye")",
  36.                 { departmentId: id },
  37.                 function (data) {
  38.                     vm.selectOptions(data);
  39.                 });
  40.         }
  41.     </script>
  42. </html>

效果：

MVC+knocKout.js 实现下拉框级联的更多相关文章

  1. [转]html 下拉框级联

    <html> <head> <title>html 下拉框级联</title> <meta charset="UTF-8"/& ...

  2. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  3. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  6. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  7. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  8. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  9. MVC实现多选下拉框

    借助Chosen Plugin可以实现多选下拉框. 选择多项: 设置选项数量,比如设置最多允许2个选项: 考虑到多选下拉<select multiple="multiple" ...

随机推荐

  1. 【python】装饰器

    来源:廖雪峰 看了好多次装饰器,发现还是廖老师讲得好,能让我看懂..... 下面是一段装饰器代码 @log def now(): " 它的含义等价于 def now(): " no ...

  2. 51nod1130(斯特林近似)

    题目链接: https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1130 题意: 中文题诶~ 思路: 直接斯特林公式就好了~ ...

  3. hive 表分区操作

    hive的数据查询一般会扫描整个表,当表数据太大时,就会消耗些时间,有时候我们只需要对部分数据感兴趣,所以hive引入了分区的概念    hive的表分区区别于一般的分布式分区(hash分区,范围分区 ...

  4. Power BI for Office 365（二）Power Query

    在上一篇中我们看到了Power BI在移动端的支持,从这一篇起降依次介绍Power BI中的各个功能组件,此篇讲通过一个故事来介绍如何在Power Query中获取并且组织数据. 在这个系列中,我们将 ...

  5. XSS跨站点脚本攻击

    XSS攻击:跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS. 以下为Jav ...

  6. IOC装配Bean（XML方式）

    Spring框架Bean实例化的方式 提供了三种方式实例化Bean 构造方法实例化(默认无参数,用的最多) 静态工厂实例化 实例工厂实例化 无参数构造方法的实例化 <!-- 默认情况下使用的就是 ...

  7. RUDP之二 —— Sending and Receiving Packets

    原文链接 原文:http://gafferongames.com/networking-for-game-programmers/sending-and-receiving-packets/ Send ...

  8. 【BZOJ1688】[Usaco2005 Open]Disease Manangement 疾病管理 状压DP

    [BZOJ1688][Usaco2005 Open]Disease Manangement 疾病管理 Description Alas! A set of D (1 <= D <= 15) ...

  9. Android 图标尺寸与设计

    样例和图解 外框:整体大小 ↑ 边框:图标留白大小 ↓ 图标:外图标的大小 ↑ 阴影:阴影特效大小 ↓ 图形:内图标的大小 ↑ 可选视图权重:使用两种类型的图形尺寸可以达到统一的视觉权重(可选),   ...

  10. 设计模式-1-概要（c#版）

    最近又重新看了几本设计模式的书籍和文章,现在再看时又有了新的感悟,而这些书籍和文章都是从需求和业务场景讲什么业务可以用什么模式,要不就是纯理论不好理解,其实我们也要理解和佩服这些概括理论的大牛,必须让 ...