title: How to do delayed select option generation
body: <p>I have some web pages which display a number of (up to several dozen) work items.
  Each work item is a form consisting of several fields, two of which are large selects (one about 350 items and the other about 650 options) which are always identical other than the initially selected item.</p>
  
  <p>The page can be pretty slow to load.  Some of this may be due to the 24KB + 52KB of html for each copy of those selects, and I'm betting a fair amount of it is the time for the browser to build what is essentially the same huge chunk of (mostly of no interest) DOM over and over again.</p>
  
  <p>What I'm thinking might be better is to just keep a master copy of the options for each in an array and just start each select out with only a single option (the initially selected value), For example:</p>
  
  <pre><code>&lt;form ...&gt;
    &lt;input ...&gt;
    &lt;select class='dept_select' id='dept' name='dept' size='1'&gt;
      &lt;option value='12345' selected&gt;Department of Banking and Finance
    &lt;/select&gt;
    &lt;select class='approver_select' id='approver' name='approver' size='1'&gt;
      &lt;option value='jpflat' selected&gt;J. Pierpont Flathead
    &lt;/select&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and then when the user clicks on the one selectbox they are interested in, build the rest of it from the array.  Is this at all sensible, and if it might be, is there some clever and succinct way to do this in jQuery or am I going to have to invent it from whole cloth and raw JavaScript?  FWIW, there's no real correlation between the selects (e.g., like selecting a state limits the valid choices for selecting a city).</p>