title: Cannot get selected value of select with jQuery when the select has been set with jQuery
body: <p>I am trying to create some cascading dropdowns, I have this I built function which half works:</p>
  
  <pre><code> function CascadeDropDowns(parentClass, childClass, action) {
  
     var DropDownId = $(parentClass + " option:selected").val();
  
     $.ajax({
       url: "/Terminals_configuration/" + action,
       data: { DropDownId: DropDownId },
       dataType: "json",
       type: "POST",
       error: function () {
         alert("An error occurred.");
       },
       success: function (data) {
         var items = "";
         $.each(data, function (i, item) {
             items += "&lt;option value=\"" + item.Value + "\"&gt;" + item.Text + "&lt;/option&gt;";
         });
           $(childClass).html(items);
           $(childClass)[0].selectedIndex = 0;
       }
     });
    }
  
      $(document).ready(function(){
        $(".DeviceTypeDDL").change(function () {
          CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups");
          CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
        });
        $(".ConfigGroupDDL").change(function () {
          CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters");
        });
      });
  </code></pre>
  
  <p>Relevant HTML - Link to jQuery v1.8.2 not included here!</p>
  
  <pre><code>&lt;form action="/Terminals_configuration" method="post"&gt;    &lt;fieldset&gt;
        &lt;legend&gt;
          &lt;h2&gt;Configuration settings&lt;/h2&gt;
        &lt;/legend&gt;
  
        &lt;div class="editor-label"&gt;
          &lt;label for="DeviceType"&gt;Device type&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          &lt;select class="DeviceTypeDDL" data-val="true" data-val-number="The field DeviceTypeSelectedItem must be a number." id="DeviceTypeSelectedItem" name="DeviceTypeSelectedItem"&gt;&lt;option value="8"&gt;IT&lt;/option&gt;
  &lt;option value="9"&gt;RS&lt;/option&gt;
  &lt;/select&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="DeviceTypeSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
         &lt;div class="editor-label"&gt;
          &lt;label for="ConfigGroup"&gt;ConfigGroup&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          &lt;select class="ConfigGroupDDL" data-val="true" data-val-number="The field ConfigGroupSelectedItem must be a number." id="ConfigGroupSelectedItem" name="ConfigGroupSelectedItem"&gt;&lt;option value="-1"&gt;No value&lt;/option&gt;
  &lt;/select&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="ConfigGroupSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
         &lt;div class="editor-label"&gt;
          &lt;label for="ConfigName"&gt;ConfigName&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          &lt;select class="ConfigNameDDL" data-val="true" data-val-number="The field ConfigNameSelectedItem must be a number." id="ConfigNameSelectedItem" name="ConfigNameSelectedItem"&gt;&lt;option value="-1"&gt;No value&lt;/option&gt;
  &lt;/select&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="ConfigNameSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
          &lt;label for="ConfigValue"&gt;ConfigValue&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          &lt;input class="text-box single-line" data-val="true" data-val-required="Please enter the configuration value" id="ConfigValue" name="ConfigValue" type="text" value="" /&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="ConfigValue" data-valmsg-replace="true"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
          &lt;label for="MergeOrDelete"&gt;MergeOrDelete&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="editor-field"&gt;
          &lt;select class="MergeDeleteDDL" data-val="true" data-val-number="The field MergeOrDeleteSelectedItem must be a number." id="MergeOrDeleteSelectedItem" name="MergeOrDeleteSelectedItem"&gt;&lt;option value="0"&gt;Delete&lt;/option&gt;
  &lt;option value="1"&gt;Merge&lt;/option&gt;
  &lt;/select&gt;
          &lt;span class="field-validation-valid" data-valmsg-for="MergeOrDeleteSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt;
        &lt;/div&gt;
  
  
        &lt;p&gt;
          &lt;input type="submit" value="Add" /&gt;
        &lt;/p&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The issue is When the first dropdown is changed i will need to populate the two children. And when the second dropdown is changed I only need to populate the one child.</p>
  
  <p>I thought that by setting <code>$(childClass)[0].selectedIndex = 0;</code> then this would make this value selected, so that when the function fires a second time with the child dropdown that has just been populated it would be able to get this value, but it doesn't.</p>
  
  <p>I'm thinking maybe the new  are not available in the DOM at this point but im not sure.</p>
  
  <p>Any help would be great.</p>