MVC+knocKout.js 實現下拉框級聯

時間 2019-12-14

標籤 mvc+knockout.js mvc knockout 實現下拉級聯欄目 JavaScript 简体版

原文原文鏈接

數據庫：部門表和員工表javascript

在控制器裏面的操做：html

 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             
19             return Json(list,JsonRequestBehavior.AllowGet);
20         }

html裏面的實現：java

@{
    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>

效果：jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。