Question

I have a 2 dropdownlist, I have to bind the 2nd one based on the Id I got from first dropdown. in the first dropdown I added OnChange event.

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');
        }
    });
}

and this is the c# code .

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

but it does not work.

Answer 1

Use val() instead of value()

Change statement

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

to

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

and the success should be like

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));
  });
}

so your function should look like :

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');
      }
    });
 }