如何使用Javascript进行级联下拉

问题描述

我正在尝试在Employee html中创建级联下拉列表。我有以下模型的相关记录。所有方法都工作正常，只是js中的级联调用不起作用

public class Depots()
{
     public int Id {get;set;}
     public DepotName {get;set;}
}
public class Department()
{
     public int Id {get;set;}
     public DepartmentName{get;set;}
}
public class DepartmentMap()
{
     public int DepotId {get;set;}
     public int Id {get;set;}
     public DepartmentName{get;set;}
}


public class Employee()
{
     public int DepotId
     public int DepartmentId
     public int Id {get;set;}
     public EmployeeName{get;set;}
}


var depots = new Depot[]
 {
                 new Depot{ 
                     Id= 1,DepotName = "Depot 1",new Depot{ 
                     Id= 2,DepotName = "Depot 2",new Depot{ 
                     Id = 3,DepotName= "Depot 3",);
}

var department= new Department[]
 {
                 new Department{ 
                     Id= 1,DepartmentName= "Location 1",new Department{
                     Id= 2,DepartmentName= Location 2",new Department{
                     Id = 3,DepartmentName"Location 3",);
}

var departmentMap= new DepartmentMap[]
 {
               new DepartmentMap{ 
                     DepotId = 1
                     DepartmentId= 1,new DepartmentMap{
                     DepotId = 1 
                     DepartmentId= 2,new DepartmentMap{
                     DepotId = 1
                     DepartmentId = 3,new DepartmentMap{ 
                     DepotId = 2
                     DepartmentId= 1,new DepartmentMap{
                     DepotId = 2 
                     DepartmentId= 2,new DepartmentMap{
                     DepotId = 3
                     DepartmentId = 1,new DepartmentMap{
                    DepotId = 3
                    DepotId = 3
                     DepartmentId = 1,);
}



var emp= new Employee[]
 {
           new Employee{ 
                Id= 1
                EmployeeName = "AAAA"
                DepotId = 1
                DepartmentId= 1,new Employee{ 
                Id= 2
                EmployeeName = "BBB"
                DepotId = 1
                DepartmentId= 1,new Employee{ 
                Id= 3
                EmployeeName = "CCC"
                DepotId = 1
                DepartmentId= 2,new Employee{ 
                Id= 4
                EmployeeName = "DDD"
                DepotId = 2
               DepartmentId= 2,);
}

我正在从Employee控制器类中调用视图，如下所示

public IActionResult Employee()
{
    ViewBag.Depots = _unitOfWork.UserDepots.GetDepots()
    return View();
}

DropdownController.cs我有以下几种下拉方法

public IEnumerable<SelectListItem> GetDepots()   // For DepotDropdown
{
 IEnumerable<SelectListItem> depotList = (from depot in ctx.Depots
 select new SelectListItem
 {
     Value = depot.Id.ToString(),Text = c.DepotName,}).ToList<SelectListItem>().OrderBy(x => int.Parse(x.Value)); 
}

public IEnumerable<SelectListItem> GetLocationsByDepotForDropdown(int depotNo)
        {

            List<SelectListItem> departmentMap
            = (from dpt in goContext.DepartmentMap
              join dep in goContext.Depot
              On dpt.DepotId = dep.Id
              Where dpt.DepotId = depotNo
           {
                Value = dpt.Id.ToString(),Text = dpt.DepartmentName,}).distinct().ToList<SelectListItem>();
            locations.Insert(0,new SelectListItem
            {
                Value = "0",Text = "-- Select --"
            });
            return locations;
        }    



public IEnumerable<SelectListItem> GetEmployeesByDepotAndDepartmentForDropdown(int depotId,int departmentId)
        {

            List<SelectListItem> employee = (
            from emp in goContext.Employee
            Join dep in  goContext.Depot
            on dep.Id = emp.DepotId
            Join dpt in  goContext.DepartmentMap
            on dpt.Id =  emp.DepartmentId
            Where emp.DepotId ==depotId
            && emp.DepartmentId = departmentId
            
            select new SelectListItem
            {
                 Value = emp.EmployeeID.ToString(),Text = emp.EmployeeName
                }).ToList<SelectListItem>();
            employee.Insert(0,Text = "-- Select --"
            });
            return employee;
        }

html文件

<div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label control-label-left col-sm-3 text-danger" for="field1">Depot*</label>
                                    <div class="controls col-sm-8">
                                        <select id="dropdownDepot" class="form-control" asp-for="DepotNo" asp-items="@ViewBag.Depots" 
                                           onchange="FillDepartment()"  data-role="select"></select>
                                        <span asp-validation-for="DepotNo" class="text-danger"></span>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label control-label-left col-sm-3 text-danger" for="field2">Department*</label>
                                    <div class="controls col-sm-8">
                                        <select id="dropdownDepartment" class="form-control" asp-for="DepartmentID" asp-items="@ViewBag.UserDepartments" 
                                              onchange="FillEmployee()"  data-role="select"></select><span id="errId2" class="error"></span>
                                        <span asp-validation-for="DepartmentID" class="text-danger"></span>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="control-label control-label-left col-sm-3"> Employee</label>
                                    <div class="controls col-sm-8">
                                        <select id="dropdownEmployee" multiple class="form-control" asp-for="Employee" asp-items="@ViewBag.Employees" data-role="select"></select>
                                    </div>
                                </div>
                            </div>
                        </div>

<script>

</script>

如何在软件仓库的更改事件中调用部门下拉菜单，以从DepartmentMap调用相应的部门。与在Depot和Department的更改事件中调用Employee下拉菜单类似。 在仓库更改中，我必须调用GetDepots（），然后为选定的仓库调用GetLocationsByDepotForDropdown（） 在部门更改中，我必须调用GetEmployeesByDepotAndDepartmentForDropdown（）。如果仓库有任何更改，则“部门和雇员”下拉列表应为空。如果部门有任何更改，则员工下拉菜单控件应为空，必须再次从下拉列表中选择。我正在尝试从html的脚本部分调用下拉方法

非常感谢您提供代码帮助

谢谢 波尔

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）