如果我选择下拉选项1，然后我得到另一个下拉只有一个记录

Question

我有2下拉， 1st是静态的'displayAnswer'和第二个'correctAnswer' 在这里我选择'displayAnswer'选项2，然后我只得到1和2在'correctAnswer'我的第二个下拉列表中， 或我选择3，然后我只在'correctAnswer'中获得第1,2和3个第二个下拉列表， 或者我选择4，然后我在'correctAnswer'中获得1,2,3和4我的第二个下拉列表。使用Mvc Razor的 。
Plz Help Me。

thnks。

Answer 1

无论您使用的是ASP.NET MVC，都可以使用jQuery来实现。这是实现你所需要的一种方式，可能还有其他的解决方案，你可以遵循，但这对我有效。

下面是我的代码示例，您可以修改它以适应您的方案。在我的示例中，我将在添加新用户时与部门和单位合作。一个部门由不同的单位组成。所以当从第一个下拉列表中选择一个部门时，所有该部门的单位将显示在第二个下拉列表中。

让我从视图（页面）开始。它接受名为CreateUserViewModel的视图模型。应始终使用视图模型，而不是通过域模型。

@model MyProject.ViewModels.Users.CreateUserViewModel 

的HTML标记代表我的两个下拉菜单：

<tr> 
    <td class="edit-label">Department <span class="required">*</span></td> 
    <td> 
      @Html.DropDownListFor(
       x => x.DepartmentId, 
       new SelectList(Model.Departments, "Id", "Name", Model.DepartmentId), 
       "-- Select --", 
       new { id = "Departments" } 
     ) 
      @Html.ValidationMessageFor(x => x.DepartmentId) 
    </td> 
</tr> 
<tr> 
    <td class="edit-label">Unit <span class="required">*</span></td> 
    <td> 
      @Html.DropDownListFor(
       x => x.UnitId, 
       new SelectList(Model.Units, "Id", "Name", Model.UnitId), 
       "-- Select --", 
       new { id = "Units" } 
     ) 
      @Html.ValidationMessageFor(x => x.UnitId) 
    </td> 
</tr> 

我CreateUserViewModel类（部分）：

public class CreateUserViewModel 
{ 
    public int DepartmentId { get; set; } 

    public IEnumerable<Department> Departments { get; set; } 

    public int UnitId { get; set; } 

    public IEnumerable<Unit> Units { get; set; } 
} 

我Department类：

public class Department 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 
} 

我

public class Unit 
{ 
    public int Id { get; set; } 

    public string Name { get; set; } 

    public int DepartmentId { get; set; } 

    public virtual Department Department { get; set; } 
} 

当视图加载我第一次填充部门下拉，我有单位下拉空：Unit类。

public ActionResult Create() 
{ 
    CreateUserViewModel viewModel = new CreateUserViewModel 
    { 
      Departments = departmentService.GetAll(), 
      Units = Enumerable.Empty<Unit>() 
    }; 

    return View(viewModel); 
} 

再回到我的视图（页）我用jQuery填充我的第二下拉：

<script> 

    function resetDropDown(targetDropDown) { 
      var items = ''; 
      items = '<option>-- Select --</option>'; 
      $(targetDropDown).empty(); 
      $(targetDropDown).html(items); 
    } 

    $(document).ready(function() { 
      $("#Departments").change(function() { 
       var url = '@Url.Action("GetUnitsByDepartmentId", "User")'; 
       var departmentId = $("#Departments").val(); 

       if (departmentId == '') { 
        resetDropDown($('#Units')); 
        return; 
       } 

       $.getJSON(url, { departmentId: departmentId }, function (data) { 
        $('#Units').empty(); 
        var items = '<option>-- Select --</option>'; 

        $.each(data, function (i, unit) { 
         items += "<option value='" + unit.Id + "'>" + unit.Name + "</option>"; 
        }); 

        $('#Units').html(items); 
       }); 
      }); 
    }); 

</script> 

在我的控制器有一个返回我的单元作为JSON结果的操作方法：

public ActionResult GetUnitsByDepartmentId(int departmentId) 
{ 
    IEnumerable<Unit> units = unitService.GetUnitsByDepartmentId(departmentId); 

    var displayedUnits = units.Select(x => new 
    { 
      Id = x.Id.ToString(), 
      Name = x.Name 
    }); 

    return Json(displayedUnits, JsonRequestBehavior.AllowGet); 
} 

该解决方案可能并不完美，但它会引导您朝着正确的方向发展。祝一切顺利。