联动下拉框

联动下拉
开发工具与关键技术：VisualStudio C#
作者：子易
撰写时间：2019/07/28
效果图：

功能点：
点击输入框展开第一个ul标签并循环添加数据，移入到第一个ul标签的内容时展开第二个ul标签并回填内容，移入第二个ul标签同理展开第三个，以此类推。移入到任何一个ul标签的内容区时，内容会回填到输入框。
第一步：构建HTML内容

 

                
联动下拉框
                
                

                    

                    

                    

                
            

第二步：在控制器查询出用绑定的数据
第一层ul可以直接查询数据绑定，第二、第三层ul则需要根据父表的数据来进行条件查询。
//第一层ul

 public ActionResult OneSelects()
    {
        var list = (from tba in myModel.PW_Livnggoods
                    select new
                    {
                        id = tba.LivinggoodsID,
                        text = tba.ItemName,
                    }).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

第二层ul

 public ActionResult TwoUl(string name)
    {
        var one = (from tbb in myModel.PW_Livnggoods
                    where tbb.ItemName == name
                    select tbb).Single();
        var list = (from tbb in myModel.PW_Costumetype
                    where tbb.LivinggoodsID == one.LivinggoodsID
                    select new
                    {
                        id = tbb.CostumetypeID,
                        text = tbb.CostumeName,
                    }).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

第三步：在页面提交请求控制器的数据并用循环对ul标签进行数据的绑定