dropdownlist jquery ddl.change() semble se déclencher avant que le changement ne se produise

Question

J'ai trois listes déroulantes en cascade.

ddlIllnessType, ddlIllnessSubType et ddlInfectiousAgent

Dans un premier temps, seul ddlIllnessType montre. En cas de modification, ddlIllnessSubType est rempli de données json et rendu visible. Jusqu'ici tout va bien.

Ensuite, lorsque l'utilisateur sélectionne une valeur de ddlIllnessSubType, une procédure similaire s'exécute pour ddlInfectiousAgent dans le gestionnaire d'événements de changement ddlIllnessSutType. Cependant, dans le code suivant, $ (this) .val() vient toujours comme 'non définis', même si l'utilisateur a choisi une valeur existante:

$("#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) {...}); 
... 
}); 

Pourquoi la sélection == 'undefined' ?? ???!

Merci à l'avance

Andrew

PS: Le plein jQuery et le code HTML sont les suivantes:

Le code complet jQuery est:

<script type="text/javascript"> 

    $('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("<option value='" 
         + optionData.EncephalitisSubTypeId 
         + "'>" + optionData.Name 
         + "</option>"); 
        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(
        "<option value='" 
        + optionData.InfectiousAgentId 
        + "'>" + optionData.Name 
        + "</option>"); 
        i++; 
       }); 
      }); 
      ddlIa.val(""); 
      $('#SubTypeContainer').fadeIn('slow'); 
      pIa.fadeIn('slow'); 
     } 

     function PrependDdlDefaults(ddl) { 
      ddl.prepend(
       "<option value='" 
       + "" 
       + "'><i>" + " --- Please choose... --- " 
       + "</i></option>"); 
     } 
    }); 


</script> 


<fieldset> 
    <legend>The Illness</legend> 
    <p> 
     According to your input, different drop down lists will appear, specialised to only 
     show the options that apply. 
    </p> 
    <p> 
     <label for="IdEncephalitisType"> 
      Type Of Encephalitis:</label> 
     <%= Html.DropDownList("IdEncephalitisType", Model.EncephalitisTypes)%> 
     <%= Html.ValidationMessage("IdEncephalitisType", "*") %> 
    </p> 
    <div id="SubTypeContainer" style="margin-left:10px;border: solid 1px #ccc; background: #efefef;"> 
     <p class="highlight" id="lblSubTypeContainer" style="font-weight:bold;color:#c00;"> 
      Extra Information regarding the Illness:</p> 
     <p id="pEncephalitisSubType"> 
      <label id="lblEncephalitisSubType" for="IdEncephalitisSubType"> 
       Sub Type of Encephalitis:</label> 
      <%= Html.DropDownList("IdEncephalitisSubType", Model.EncephalitisSubTypes)%> 
      <%= Html.ValidationMessage("IdEncephalitisSubType", "*") %> 
     </p> 
     <p id="pInfectiousAgent"> 
      <label id="lblInfectiousAgent" for="IdInfectiousAgent"> 
       Infectious Agent:</label> 
      <%= Html.DropDownList("IdInfectiousAgent", Model.InfectiousAgents) %> 
      <%= Html.ValidationMessage("IdInfectiousAgent", "*") %> 
     </p> 
    </div> 
</fieldset> 

Le régulateur ne besoin d'être montré, car le json livré est correct. Comme je l'ai testé et ce qui est rendu est correct.

Answer 1

Cracked il !!!!!!

Le problème était dans le rappel JSON:

$.each(json, function(index, optionData) {     ddlEst.append("<option value='"      + optionData.Id      + "'>" + optionData.Name      + "</option>");     i++;    }); 
$.each(json, function(index, optionData) { 
        ddlEst.append("<option value='" 
         + optionData.Id 
         + "'>" + optionData.Name 
         + "</option>"); 
        i++; 
       }); 

... où optionData.Id n'est pas le bon nom pour le terrain! Oh! ** & ^% $ £ "¬

En conséquence, toutes les balises ont la valeur suivante:

value="undefined" 

AAAAAAAARRRRRRGGGGGGJJJHHHHHH !!!!!!!!