dropdownlist jquery ddl.change（）似乎在更改發生之前觸發

Question

我有三個級聯的下拉列表。

ddlIllnessType，ddlIllnessSubType和ddlInfectiousAgent

最初，只有ddlIllnessType被示出。在更改時，ddlIllnessSubType填充了json數據並可見。到現在爲止還挺好。

接下來，當用戶從ddlIllnessSubType中選擇一個值時，類似的過程針對ddlIllnessSutType更改事件處理程序中的ddlInfectiousAgent運行。然而，在下面的代碼，$（本）.VAL（）總是出現爲「未定義」，即使用戶選擇了一個現有的值：

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

爲什麼選擇==「未定義」？ ???！

在此先感謝

安德魯

PS：完整的jQuery和HTML如下：

完整的jQuery代碼是：

<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> 

控制器不需要顯示，因爲json提供的是正確的。正如我測試過的，呈現的內容是正確的。

Answer 1

裂開了!!!!!!

的問題是在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++; 
       }); 

...其中optionData.Id是不是該字段的正確的名稱！哦，** & ^％$£「¬

其結果是，所有的標籤有以下值：

value="undefined" 

AAAAAAAARRRRRRGGGGGGJJJHHHHHH !!!!!!!!