title: dropdownlist jquery ddl.change() seems to fire before change takes place
body: <p>I have three cascaded drop down lists.</p>
  
  <p>ddlIllnessType, ddlIllnessSubType and ddlInfectiousAgent</p>
  
  <p>Initially, only ddlIllnessType is showing.  On change, ddlIllnessSubType is filled with json data and made visible.  So far, so good.</p>
  
  <p>Next, when the user selects a value from ddlIllnessSubType, a similar procedure runs for ddlInfectiousAgent in the ddlIllnessSutType change event handler.  However, in the following code, $(this).val() always comes up as 'undefined', even though the user has chosen an existing value:</p>
  
  <pre><code>$("#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) {...});
  ...
  });
  </code></pre>
  
  <p>Why is selection == 'undefined'?????!</p>
  
  <p>Thanks in advance</p>
  
  <p>Andrew</p>
  
  <p>PS:  The full jQuery and the HTML are as follows:</p>
  
  <p>The full jQuery code is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $('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) &amp;&amp; ((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("&lt;option value='"
                          + optionData.EncephalitisSubTypeId
                          + "'&gt;" + optionData.Name
                          + "&lt;/option&gt;");
                      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(
                      "&lt;option value='"
                      + optionData.InfectiousAgentId
                      + "'&gt;" + optionData.Name
                      + "&lt;/option&gt;");
                      i++;
                  });
              });
              ddlIa.val("");
              $('#SubTypeContainer').fadeIn('slow');
              pIa.fadeIn('slow');
          }
  
          function PrependDdlDefaults(ddl) {
              ddl.prepend(
                  "&lt;option value='"
                  + ""
                  + "'&gt;&lt;i&gt;" + " --- Please choose... --- "
                  + "&lt;/i&gt;&lt;/option&gt;");
          }
      });
  
  
  &lt;/script&gt;
  
  
  &lt;fieldset&gt;
      &lt;legend&gt;The Illness&lt;/legend&gt;
      &lt;p&gt;
          According to your input, different drop down lists will appear, specialised to only
          show the options that apply.
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label for="IdEncephalitisType"&gt;
              Type Of Encephalitis:&lt;/label&gt;
          &lt;%= Html.DropDownList("IdEncephalitisType", Model.EncephalitisTypes)%&gt;
          &lt;%= Html.ValidationMessage("IdEncephalitisType", "*") %&gt;
      &lt;/p&gt;
      &lt;div id="SubTypeContainer" style="margin-left:10px;border: solid 1px #ccc; background: #efefef;"&gt;
          &lt;p class="highlight" id="lblSubTypeContainer" style="font-weight:bold;color:#c00;"&gt;
              Extra Information regarding the Illness:&lt;/p&gt;
          &lt;p id="pEncephalitisSubType"&gt;
              &lt;label id="lblEncephalitisSubType" for="IdEncephalitisSubType"&gt;
                  Sub Type of Encephalitis:&lt;/label&gt;
              &lt;%= Html.DropDownList("IdEncephalitisSubType", Model.EncephalitisSubTypes)%&gt;
              &lt;%= Html.ValidationMessage("IdEncephalitisSubType", "*") %&gt;
          &lt;/p&gt;
          &lt;p id="pInfectiousAgent"&gt;
              &lt;label id="lblInfectiousAgent" for="IdInfectiousAgent"&gt;
                  Infectious Agent:&lt;/label&gt;
              &lt;%= Html.DropDownList("IdInfectiousAgent", Model.InfectiousAgents) %&gt;
              &lt;%= Html.ValidationMessage("IdInfectiousAgent", "*") %&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>The controller doesn't need to be shown, as the json delivered is correct.  As in I've tested it and what gets rendered is correct.</p>