title: Refreshing select after selected option is changed by jQuery
body: <p>I'm updating the selected option programmatically using jQuery, but nothing changes in the browser.  (That is, the old selected option remains selected instead of switching to the newly selected option.)  Suggestions?</p>
  
  <p>Thanks.  --Jeff</p>
  
  <p>I have a simple form like this:</p>
  
  <pre><code>&lt;form id="form1" name="form1" method="" action=""&gt;
  &lt;p&gt;Assign: 
  &lt;select name="assigner" id="assigner"&gt;
  &lt;option value="Sam" selected="selected"&gt;Sam&lt;/option&gt;
    &lt;option value="Harry"&gt;Harry&lt;/option&gt;
    &lt;option value="Fred"&gt;Fred&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="button" name="button1" id="button1" value="Submit" /&gt;
  &lt;/p&gt;
  &lt;p&gt;    Task A: &lt;select name="assignment[]" id="assigner"&gt;
    &lt;option value="Sam"&gt;Sam&lt;/option&gt;
    &lt;option value="Harry" selected="selected"&gt;Harry&lt;/option&gt;
    &lt;option value="Fred"&gt;Fred&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;    
  Task B: &lt;select name="assignment[]" id="assigner"&gt;
    &lt;option value="Sam"&gt;Sam&lt;/option&gt;
    &lt;option value="Harry"  selected="selected"&gt;Harry&lt;/option&gt;
    &lt;option value="Fred"&gt;Fred&lt;/option&gt;
  &lt;/select&gt;
  &lt;/p&gt;
  &lt;/form&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and my jQuery code looks like this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){ 
  $('[name="button1"]').click(
      function(){
          var form = $(this).parents('form');
          var assigned = form.find(':selected').first().val();
          form.find(':selected').each(function(index){
              $(this).val( assigned ).change();
          });
      }
   );
  });
  &lt;/script&gt;
  </code></pre>