Cannot get selected value of select with jQuery when the select has been set with jQuery
<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>
