asp.net mvc 下拉框级联

给自己需要级联的控制器添加  要级联的下拉框获取

  #region//获取宿舍楼   
       
        [HttpPost]
        public ActionResult Drom(string id) 
        {
            object obj=getDrom(id);
            return Json(obj);
        }
        //获取宿舍楼  
        public List<SelectListItem> getFloor()
        {
            var quert = db.Floor;
            List<SelectListItem> list = new List<SelectListItem>();
            foreach (var item in quert)
            {
                list.Add(new SelectListItem { Text = item.FloorName, Value = item.FloorID.ToString() });
            }
            list.Insert(0, new SelectListItem { Text = "选择宿舍楼", Value = "-1" });
            return list;
        }
        //获取宿舍
        public List<SelectListItem> getDrom(string id) {
            List<SelectListItem> list = new List<SelectListItem>();
            int Floorid=int.Parse(id);
            if (Floorid > 0) 
            {
                var floor = db.Dorm.Where(a => a.FloorID == Floorid).ToList();
                foreach (var item in floor) {
                    list.Add(new SelectListItem { Text = item.DormName, Value = item.DormID.ToString() });
                }
            }
            return list;
        }
        #endregion

然后在需要的界面方法下返回数据

 public ActionResult Create()
        {


            ViewData["FloorID"] = getFloor();

            ViewData["DormID"] = new List<SelectListItem>()
                {
                    new SelectListItem {Text = "请选则宿舍楼", Value = "-1"}
                };

            return View();
        }

前端引入js文件 为下拉框添加chang实践  使用jspost请求方法

<script src="~/jquery-3.5.1/jquery-3.5.1.js"></script>
<script src="~/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
    $(function () {
        $("#FloorID").change(function () {
            var id = this.value;
            $.post("/Scores/Drom", { "id": id }, function (data) {
                $("#DormID").html("");
                $.each(data, function (i, j) {
                    var op = new Option();
                    op.text = j.Text;
                    op.value = j.Value;
                    document.getElementById("DormID").add(op);
                });
            });
        });
    })
</script>

查看结果:

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值