Jquery 如何根据用户从下拉列表中的选择显示多个复选框选择？

我想在我的MVC3 razor应用程序上显示一个下拉框，用户可以从中选择类别，根据他的选择，我想显示复选框中的子类别，以便用户可以选择多个子类别

谁能帮我弄到这个

下面是我从web服务收到的json，我将其反序列化到对象，那么如何将该对象分配到两个不同的列表类别下拉和子类别复选框

JSON:

实体：

public class MyData
{
  public int Code { get; set; }
  public string Status { get; set; }
  public List<Category> Categories { get; set; }
}

public class Category
{
  public string Name { get; set; }
  public int ID { get; set; }
  public List<Subcategory> Subcategories { get; set; }
}

public class Subcategory
{
  public string Name { get; set; }
  public int ID { get; set; }
  public bool Flag { get; set; }
}

---

您可以使用AJAX。订阅dropdownlist的change事件，并触发一个AJAX请求，请求传递所选类别的控制器操作。该操作将查询数据库中相应的子类别，并返回带有相应复选框的局部视图，这些复选框将被注入DOM中

因此，假设您已经为视图中的类别创建了dropdownlist：

@Html.DropDownListFor(
    x => x.CategoryId, 
    Model.Categories, 
    new { 
        id = "categories",
        data_subcategoriesurl = Url.Action("subcategories", "somecontroller")
    }
)

以及一些div，其中将包含页面上某个地方的子类别：

<div id="subcategories">
    @Html.EditorFor(x => x.SubCategories, "SubCategories")
</div>

现在，您可以在单独的javascript文件中订阅下拉列表的更改事件：

$(function() {
    $('#categories').change(function() {
        var subcategoriesUrl = $(this).data('subcategoriesurl');
        var selectedCategoryId = $(this).val();
        $('#subcategories').load(subcategoriesUrl, { id: selectedCategoryId });
    });
});

最后是将使用AJAX调用的子类别操作：

public ActionResult SubCategories(int? id)
{
    var subCategories = Repository.GetSubCategories(id);
    return View(subCategories);
}

---

您的意思是希望根据选择的类别将子类别作为复选框列表加载吗？您需要点击数据库来加载子类别吗？使用类系统或ID系统来匹配select的值，隐藏/显示非常简单。。。html的示例会有所帮助。更好地描述目标也会有所帮助help@Daniel洛伦兹，是的，我必须进行restful服务调用以获取类别和子类别。@charlietfl我如何隐藏和显示它？我正在对我的应用程序进行restful调用以获取类别和子类别，那么获取类别和子类别并显示类别下拉列表的最佳方法是什么？你能解释一下，在我得到jason响应后，我将反序列化该对象，那么我应该如何将类别/子类别值获取到我的viewmodel，以便在用户调用时显示它们设置这些类别将与其他文本框一起显示的页面，一旦用户提交表单，它就会发布所有选择以及其他文本框值。@updev，这里有两种可能的方法：要么使用AJAX查询RESTful服务，该服务将返回JSON，然后填充最初呈现为空的下拉选项，或者让您的控制器操作查询服务或直接查询存储库以填充视图模型，该视图模型将被传递到视图，然后使用DropDownList for helper呈现为下拉列表。这就是我在回答中显示的内容。就子类别而言，使用AJAX似乎是必要的，因为您希望在每次选择更改时都刷新此复选框列表。您可以帮助定义此场景的模型/视图模型吗？您可以拥有一个视图模型，其中包含两个标量属性，表示所选类别id和所选子类别id和2个IEnumerable属性，分别表示可用类别和可用子类别。但当然，我不知道您想要实现什么，也不知道您想要构建的应用程序的上下文和具体要求，所以我帮不了多少忙。谢谢您在这方面帮助我。我已经添加了json和用于将json反序列化到对象的实体。现在，如何将包含类别和子类别的对象分配给下拉框和复选框，以便所有子类别都基于类别选择工作？

$(function() {
    $('#categories').change(function() {
        var subcategoriesUrl = $(this).data('subcategoriesurl');
        var selectedCategoryId = $(this).val();
        $('#subcategories').load(subcategoriesUrl, { id: selectedCategoryId });
    });
});

public ActionResult SubCategories(int? id)
{
    var subCategories = Repository.GetSubCategories(id);
    return View(subCategories);
}