title: Refresh dropdownlist based on select option in list
body: <p>I really need help. Am new to <code>jQuery</code> and i am trying to refresh a <code>dropdown list</code> or change its value when an option from the list is selected.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select name="State_locate" class="State"&gt;
      &lt;option value=" " selected="selected"&gt;Select a state&lt;/option&gt;
      &lt;option value="AL"&gt;Alabama&lt;/option&gt;
      &lt;option value="AK"&gt;Alaska&lt;/option&gt;
  &lt;/select&gt;
  &lt;div id="City_1" class="Alabama"&gt;
      &lt;select name="City_location[]" class="CityExt"&gt;
          &lt;option value="Null" selected="selected"&gt;Select a city&lt;/option&gt;
          &lt;option value="Avondale"&gt;Avondale&lt;/option&gt;
          &lt;option value="Buckeye"&gt;Buckeye&lt;/option&gt;
          &lt;option value="Catalina"&gt;Catalina&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div id="City_1" class="Alaska"&gt;
      &lt;select name="City_location[]" class="CityExt"&gt;
          &lt;option value="Null" selected="selected"&gt;Select a city&lt;/option&gt;
          &lt;option value="Lancaster"&gt;Lancaster&lt;/option&gt;
          &lt;option value="Soth"&gt;Soth&lt;/option&gt;
          &lt;option value="Foothills"&gt;Foothills&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>// JavaScript Document
  
  $("select").bind("change", function () {
  
      if ($(this).val() == "AL") {
          $(".Alabama").slideDown();
  
          $(".Alaska").slideUp(function () {
  
              if ($('.Alabama').is(':visible')) {
                  $(".Alaska option[value='Lancaster']").attr('selected', 'selected')
              }
          });
      } else if ($(this).val() == "AK") {
          $(".Alaska").slideDown();
          $(".Alabama").slideUp();
      }
  })
  </code></pre>
  
  <p>what i am trying to do is when a state is selected , then a city drops down. That works perfectly. But once submitted, the values of the city are stored in the array <code>City_location[]</code>.</p>
  
  <p>The problem am having is that if the user selects a city for Alaska and later on selects another city under Alabama before submitting the form, you end up with two cities under Alabama and Alaska in the array. </p>
  
  <p>I am looking for a way to select the value "Null" for the state Alaska if Alabama is selected. But the code i have does not work. It works only if the value is anything else but "Null". For example if i use the value "Lancaster", in this section of the <code>jQuery</code> code</p>
  
  <pre><code>$(".Alaska option[value='Lancaster']").attr('selected', 'selected')
  </code></pre>
  
  <p>It only works once. If i do it twice, it does not update. How can i solve this problem.</p>
  
  <p>Sorry for the long code. Thanks for the help.</p>