cascading dropdown on partial view mvc4

Question

I have a partial view with a few textboxes along with 3 ddl for city/state/country. I have one view model to load country/state/city data initially. I load this partial view based on value from one of my dropdown change event on my main view. My problem is the change event of the dropdownlist on partial view rendered on my main view is not firing.

partialview :

@model CarrierClaims.Web.ViewModels.CarrierLocationViewModel
@Html.DropDownListFor(model=>model.CarrierLocation.CountryId,Model.CountryList,"-Select Country-")

• my js on my main view

  $("#CarrierLocation_CountryId").change(function () {
  
          var url = '@Url.Content("~/")' + "Claims/GetStateList";
          var ddlsource = "#CarrierLocation_CountryId";
          var ddltarget = "#CarrierLocation_StateId";
          $.getJSON(url, { id: $(ddlsource).val() }, function (data) {
              $(ddltarget).empty();
              $.each(data, function (index, optionData) {
                  $(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>");
              });
  
          });
      });
  

Any suggestions?

Answer 1

I think the problem is jquery not triggers the event because you create the second dropdown dinamically, try to change this:

$("#CarrierLocation_CountryId").change(function () {  

For this:

$(document.body).on('change', '#CarrierLocation_CountryId', function() {