dropdownlist jquery ddl.change()가 변경되기 전에 실행되는 것 같습니다.

Question

3 개의 계단식 드롭 다운 목록이 있습니다.

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