La lista desplegable jquery ddl.change () parece dispararse antes de que tenga lugar el cambio

Tengo tres listas desplegables en cascada.

ddlIllnessType, ddlIllnessSubType y ddlInfectiousAgent

Inicialmente, solo se muestra ddlIllnessType. En el cambio, ddlIllnessSubType se llena con datos json y se hace visible. Hasta ahora tan bueno.

A continuación, cuando el usuario selecciona un valor de ddlIllnessSubType, se ejecuta un procedimiento similar para ddlInfectiousAgent en el controlador de eventos de cambio ddlIllnessSutType. Sin embargo, en el siguiente código, $ (this) .val () siempre aparece como “indefinido”, aunque el usuario haya elegido un valor existente:

$("#ddlIllnessSubType").change(function() { var selection = $(this).val(); // go and get Json based on the value of selection. // Doesn't work cos selection == 'undefined' var url = "/IllnessDetail/CascadedDdlInfectiousAgent/" + selection; getJSON(url, function(data) {...}); ... }); 

¿Por qué la selección == ‘no definido’ ?????!

Gracias por adelantado

Andrés

PD: El jQuery completo y el HTML son los siguientes:

El código completo de jQuery es:

  $('document').ready(function() { var pEst = $("#pEncephalitisSubType"); var pIa = $("#pInfectiousAgent"); var ddlEst = $("#IdEncephalitisSubType"); var ddlIa = $("#IdInfectiousAgent"); $('#SubTypeContainer').hide(); pEst.hide(); pIa.hide(); // debugger $('select').each(function() { $(this).val(""); //alert($(this).val()); }); // Change Event Handler $("#IdEncephalitisType").change(function() { var selection = $(this).val(); pEst.fadeOut('slow'); pIa.fadeOut('slow'); ddlEst.val(""); ddlIa.val(""); if (selection == 0) { $('#SubTypeContainer').fadeOut('slow'); } else { var url = "/Members/IllnessDetail/CascadedDdlSubType/" + selection; AjaxEncephalitisSubTypes(url); } }); // Change Event Handler $("#IdEncephalitisSubType").change(function() { var selection = $(this).val(); debugger pIa.fadeOut('slow'); ddlIa.val(""); if (selection != "") { if (($("#IdEncephalitisType").val() == 1) && ((selection == 1) || (selection == 2))) { var url = "/Members/IllnessDetail/CascadedDdlInfectiousAgent/" + selection; AjaxInfectiousAgents(url); } } }); function AjaxEncephalitisSubTypes(url) { $('#SubTypeContainer').fadeOut('slow'); $.getJSON(url, null, function(json) { ddlEst.empty(); ddlIa.empty(); PrependDdlDefaults(ddlEst); var i = 0; $.each(json, function(index, optionData) { ddlEst.append("" + optionData.Name + ""); i++; }); $('#SubTypeContainer').fadeIn('slow'); ddlEst.val(""); pEst.fadeIn('slow'); }); } function AjaxInfectiousAgents(url) { $('#SubTypeContainer').fadeOut('slow'); $.getJSON(url, null, function(data) { var i = 0; ddlIa.empty(); PrependDdlDefaults(ddlIa); $.each(data, function(index, optionData) { ddlIa.append( "" + optionData.Name + ""); i++; }); }); ddlIa.val(""); $('#SubTypeContainer').fadeIn('slow'); pIa.fadeIn('slow'); } function PrependDdlDefaults(ddl) { ddl.prepend( "" + " --- Please choose... --- " + ""); } });  
The Illness

According to your input, different drop down lists will appear, specialised to only show the options that apply.

Extra Information regarding the Illness:

No es necesario mostrar el controlador, ya que el json entregado es correcto. Como en lo he probado y lo que se renderiza es correcto.

¡¡¡Cracked !!!!!!

El problema estaba en la callback json:

 $.each(json, function(index, optionData) { ddlEst.append(""); i++; }); $.each(json, function(index, optionData) { ddlEst.append(""); i++; }); 

… donde optionData.Id no es el nombre correcto para el campo! Oh, ** & ^% $ £ “! ¬

Como resultado, todas las tags tenían el siguiente valor:

 value="undefined" 

AAAAAAAARRRRRRGGGGGGJJJHHHHHH !!!!!!!!