title: jQuery: Setting Select Option Dynamically
body: <pre><code>child.attr('selectedIndex', 1);
  </code></pre>
  
  <p>Doesn't seem to work in my case.</p>
  
  <p>I have two cascading dropdown lists, a parent and a child.  To start, they both contain the same values.  When a user selects an item from the parent select box, it is removed as a choice in the child select.</p>
  
  <p>Sometimes, the parent select box has only 3 items, the default and 2 values.  When a user selects a parent value in this case, the only possible choice in the child select is the one remaining non-default value.</p>
  
  <p>So, when the parent has only two values, I'd like to automatically select the non-default value that is left in the child box when a user selects something parent select.</p>
  
  <p>The HTML I start with might be as follows:</p>
  
  <pre><code>&lt;select name="from" class="from"&gt;
  &lt;option value="" selected="selected" class="default"&gt;Select a value&lt;/option&gt;
  &lt;option value="na"&gt;One&lt;/option&gt;
  &lt;option value="ja"&gt;Two&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="to" class="to"&gt;
  &lt;option value="" selected="selected" class="default"&gt;Select a value&lt;/option&gt;
  &lt;option value="na"&gt;One&lt;/option&gt;
  &lt;option value="ja"&gt;Two&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Then if the user selects "One" in the parent, the child select should automatically have "Two" selected.</p>
  
  <p>Here is my jQuery I use to remove a value from the child when a value in the parent is selected:</p>
  
  <pre><code>    (function ($) {
          function cascadeSelect(parent, child) {
              var childOptions = child.find('option:not(.default)');
              child.data('options', childOptions);
              parent.change(function () {
                  childOptions.remove();
                  child.append(child.data('options').filter('.' + this.value))
                      .change();
                  if (child.data('options').length == 2) {
                      [select the last option here]
                  }
  
              })
  
              if (parent.val()) {
                  childOptions.not('.default, .' + parent.val()).remove();
              }
  
          }
  
  
          $(function () {
              cascadeForm = $('.askform');
              pulldown_from = cascadeForm.find('.from');
              pulldown_to = cascadeForm.find('.to');
  
              cascadeSelect(pulldown_from, pulldown_to);
          });
  </code></pre>
  
  <p>I've added the line that checks if there are only two options in the child select:</p>
  
  <pre><code>                if (child.data('options').length == 2) {
                      [select the non-default child option here]
                  }
  </code></pre>
  
  <p>But I can't figure out how to select the non-default child option.  I thought I could do it by using the .selectedIndex:</p>
  
  <pre><code>child.attr('selectedIndex', 1);
  </code></pre>
  
  <p>But this seems to reference the original index values (the indexes as they were before I have removed the value selected in the parent).</p>
  
  <p>So how can I automatically select the only non-default option in the child select when there are only two options to start with in the parent?</p>