title: How do you re-populate dynamically generated options for a select field?
body: <p><strong>Background</strong>
  I have two select form fields chained together: duration and frequency. When the user selects a frequency, the duration options are dynamically inserted. There are default options, but those are just so that the field isn't empty when the user expands it. </p>
  
  <p>For example, the frequency options are "day", "other day", and "week". If I select "day", the frequency options change to "5 days", "15 days", and "30 days".</p>
  
  <p><strong>Problem</strong>
  The problem comes when the user submits the form with errors, the form is returned with all the form fields re-populated and the errors highlighted -- except for the Frequency select field -- whose options are dynamically generated. It is not highlighted and it's options are the default options. </p>
  
  <p>Is there a way that I can have these options re-populated if the user submits with an error. We are doing quite a bit of JavaScript validation, so this situation shouldn't happen that often, but would like to make getting an error as painless an experience as possible for the users.</p>
  
  <p><strong>Code</strong>
  I'm using jquery and a jquery plugin called cascade to chain the two fields together. 
  (<a href="http://plugins.jquery.com/project/cascade" rel="nofollow noreferrer">http://plugins.jquery.com/project/cascade</a>)</p>
  
  <p>Here's my custom JavaScript.</p>
  
  <p>This script generates the list of options:</p>
  
  <pre><code>var list1 = [
      {'When':'86400','Value':' ','Text':' '},
      {'When':'172800','Value':' ','Text':' '},
      {'When':'604800','Value':' ','Text':' '},
      {'When':'86400','Value':'432000','Text':'5 days'},
      {'When':'86400','Value':'1296000','Text':'15 days'},
      {'When':'86400','Value':'2505600','Text':'30 days'},
      {'When':'172800','Value':'1296000','Text':'15 days'},
      {'When':'172800','Value':'2505600','Text':'30 days'},
      {'When':'172800','Value':'3888000','Text':'45 days'},
      {'When':'604800','Value':'2505600','Text':'4 weeks'},
      {'When':'604800','Value':'3715200','Text':'6 weeks'},
      {'When':'604800','Value':'4924800','Text':'8 weeks'}
  ];
  
  function commonTemplate(item) {
      return "&lt;option value='" + item.Value + "'&gt;" + item.Text + "&lt;/option&gt;"; 
  };
  
  function commonMatch(selectedValue) {
      return this.When == selectedValue; 
  };
  </code></pre>
  
  <p>And this is the script that triggers the generation of the select options:</p>
  
  <pre><code>jQuery("#duration).cascade("#frequency",{
      list: list1,            
      template: commonTemplate,
      match: commonMatch          
  })
  </code></pre>
  
  <p><strong>The Question</strong>
  Any thoughts on how to get the dynamically generated frequency options to re-populate when the form is returned to the browser with errors? Could either use the cascade plugin I'm currently using or some other method? </p>
  
  <p>Help is muchly appreciated. :-)</p>