Question

我有两个下拉列表，如下所示

 @Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.Products, "ProductId", "ProductName", Model == null? string.Empty : Model.ProductId),"Select Product",new { @class = "form-control" })

 @Html.DropDownListFor(model => model.SubProduct, Enumerable.Empty<SelectListItem>(), "Select Sub Product", new { @class = "form-control" })

我正在使用JQuery绑定基于所选产品的子产品。这很好。现在，在编辑时，我正在设置产品的选定值。此时，绑定和设置子产品价值的最佳方法是什么？

我想到的一种方法是使用JQuery手动触发下拉列表的更改事件。但是问题在于，这需要在jquery函数中手动设置选定的值。

有什么建议吗？

Answer 1

您的代码可以像这样

@Html.DropDownListFor(model => model.ProductId, new SelectList(ViewBag.Products, "ProductId", "ProductName", Model == null? string.Empty : Model.ProductId),"Select Product",new { id="product-ddl", @class = "form-control" })
<select id="sub-product-ddl" class = "form-control" name="SubProduct"></select>

<script>
$("#product-ddl").change(function() {
    var selectedProductId = $(this).val();
    var url = "your url";
    var method = "GET";
    $.ajax({
        method: method ,
        url: url ,
        data: { ProductId: selectedProductId  }
    })
    .done(function(response) { // assume it is list of products
       var subProductsDdl = $("#sub-product-ddl");
       subProductsDdl.find('option').remove();
       for(var i = 0;i< response.length;i++){
            subProductsDdl.append($('<option>', {
                value: response[i].ProductId,
                text: response[i].ProductName
            }));
        }
     });
});
</script>

只需将其编辑为您的API端点

在MVC中维持级联下拉菜单的最佳方法

1 个答案: