数据库：部门表和员工表

在控制器里面的操作：

 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 实现下拉框级联的更多相关文章

  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. JavaScript高级程序设计学习笔记--DOM

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Ele ...

  2. Java GridBagLayout 简单使用

    这里只介绍了很基础布局构建及使用,主要是关于 GridBagLayout. 首先整套流程大概是, 声明一个 GridBagLayout 对象 private GridBagLayout gridBag ...

  3. SQL优化技巧

    我们开发的大部分软件,其基本业务流程都是:采集数据→将数据存储到数据库中→根据业务需求查询相应数据→对数据进行处理→传给前台展示.对整个流程进行分析,可以发现软件大部分的操作时间消耗都花在了数据库相关 ...

  4. Java远程方法调用(Remote Method Invocation,RMI)

    Java RMI简介: 它是Java的一个核心API和类库,允许一个Java虚拟机上运行的Java程序调用不同虚拟机上运行的对象中的方法,即使这两个虚拟机运行于物理隔离的不同主机上. Java RMI ...

  5. [译]：Orchard入门——Orchard控制面板概览

    原文链接:Getting Around the Dashboard 文章内容基于Orchard 1.8版本 Orchard控制面板用于管理网站.改变外观.添加内容以及控制Orchard功能可用性.成功 ...

  6. 【MongoDB】6.关于MongoDB存储文件的 命令执行+代码执行

    参考:http://www.runoob.com/mongodb/mongodb-gridfs.html 1.命令执行 MongoDB GridFS GridFS 用于存储和恢复那些超过16M(BSO ...

  7. MYSQL外键(Foreign Key)的使用

    在MySQL 3.23.44版本后,InnoDB引擎类型的表支持了外键约束.外键的使用条件:1.两个表必须是InnoDB表,MyISAM表暂时不支持外键(据说以后的版本有可能支持,但至少目前不支持): ...

  8. 【Exception—WebForm】当应用程序不是以 UserInteractive 模式运行时显示模式对话框或窗体是无效操作。请指定 ServiceNotification 或 DefaultDesktopOnly 样式，以显示服务应用程序发出的通知。

    最近做的项目现在发布到服务器上开始测试了,本地好好的程序,到服务器上却报异常了: 当应用程序不是以 UserInteractive 模式运行时显示模式对话框或窗体是无效操作.请指定 ServiceNo ...

  9. css 选择器优先级

    优先级自上而下逐渐递减 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配 ...

  10. 开源的一些GIS项目下载

    worldwind svn地址: https://nasa-exp.svn.sourceforge.net/svnroot/nasa-exp/trunk/WorldWind dotspatial sv ...