title: Efficiently rendering many select boxes on a page
body: <p>I am working on a web application that makes heavy use of grids with select dropdowns for data entry. The grid consists of rows of select boxes. In some situations, there can be hundreds of select boxes on the page at the same time.</p>
  
  <p>At the moment, I render the grid similar to the method below:</p>
  
  <pre><code>function render(jsonData) {
      var html = [];
      $.each(jsonData.Rows, function (i, row) {
          html.push('&lt;tr data-id="', row.Id, '"&gt;&lt;td&gt;');
          renderSelect(html, globalVar.ArrayX, row.ValueX);
          html.push('&lt;/td&gt;&lt;td&gt;');
          renderSelect(html, globalVar.ArrayY, row.ValueY);
          html.push('&lt;/td&gt;&lt;td&gt;');
          ...
          html.push('&lt;/tr&gt;');
      });
      $('tbody#container').html(html.join(''));
  }
  
  function renderSelect(html, set, selectedValue) {
      html.push('&lt;select&gt;');
      $.each(set, function (i, item) {
          html.push('&lt;option value="', item.Id, '"', item.Id === selectedValue ? ' selected="1"' : '', '&gt;', item.Name, '&lt;/option&gt;');
      });
      html.push('&lt;/select&gt;');
  }
  </code></pre>
  
  <p>Most of the select boxes have the same options, only with different selected items per row (so I can't simply cache the select box html).</p>
  
  <p>Performance is not terrible, Chrome renders the grid in 1 second and FF and IE in about 2. Still I'm wondering, if there may be a more memory/performance efficient alternative to create these select boxes, maybe some way to reference them instead of re-creating them for every row?</p>