jquery ajax to bind dropdownlist MVC

Question

我有一个 2 个下拉列表，我必须根据我从第一个下拉列表中获得的 Id 绑定第二个下拉列表。 在第一个下拉列表中，我添加了OnChange事件。

function onChange() {
    var variantDropDown = $('#VariantName');
    $.ajax({
            url: '/Admin/CustomProductPinCodesManagement/GetProductVarinats',
            type: 'post',
            data: { productId: $("#ProductName").data("tDropDownList").value() },
                      success: function (data) {
                          $.each(variants, function (i, variant) {
                              $states.append('<option value="' + variant.Id + '">' +   variant.Name + '</option>');
            });
        },
        error: function () {
            alert('Error');
        }
    });
}

这是 C# 代码 .

[HttpPost]
public ActionResult GetProductVarinats(string productId)
{
    var variants = _productService.GetProductVariantsByProductId(Convert.ToInt32(productId));
    return Json(new { Result = true, data = variants }, JsonRequestBehavior.AllowGet);
}

但它不起作用。

Answer 1

使用 val() 而不是 value()

变更声明

data: { productId: $("#ProductName").data("tDropDownList").value() }

自

data: { productId: $("#ProductName").data("tDropDownList").val() }

成功应该是这样的

success: function (data) {
  //For getting list of variants, you should access it by `data.data.variants`
  //because you will get your json object in data, and for getting the value `variants`
  //you should capture the `data` property of returned json object like `data.data`
  $.each(data.data.variants, function (i, variant) {
     $states.append('<option value="' + variant.Id + '">'+ variant.Name + '</option>');
     //you can try this also for creating options
     //$states.append($('<option/>').text(variant.Name).attr('value',variant.Id));
  });
}

所以你的函数应该看起来像：

function onChange() {
   var variantDropDown = $('#VariantName');
   $.ajax({
      url: '/Admin/CustomProductPinCodesManagement/GetProductVarinats',
      type : 'post',
      data: { productId: $("#ProductName").data("tDropDownList").val() },
      success: function (data) {
        $.each(data.data.variants, function (i, variant) {
           $states.append($('<option/>').text(variant.Name).attr('value',variant.Id));
         });
      },
      error: function () {
         alert('Error');
      }
    });
 }

Answer 2

AcidMedia 有一个名为 TTControls 的库，它使用 Telerik，您可以使用 TTControls.LinkedDropDown 控件来解决此问题。