title: Trying to create dynamic select boxes with Javascript and jQuery
body: <p>I'm not a front-end developer and I'm trying to create a select box and add its options totally dynamically using Javascript and jQuery.</p>
  
  <p>I'm almost there but I am having a problem adding each new select to the div block (the number of selects is different at different times).</p>
  
  <p>So far, I can either get the last select created in the following code displayed (but without span tags) </p>
  
  <pre><code>$('#meeting-eft-time-unit-data').append('&lt;span&gt;').html(se).append('&lt;/span&gt;');
  </code></pre>
  
  <p>or I just get the following list ...</p>
  
  <pre><code>$('#meeting-eft-time-unit-data').append('&lt;span&gt;' + se + '&lt;/span&gt;');
  object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement]
  </code></pre>
  
  <p>Here's the code:</p>
  
  <pre><code>$.each(event_type_time_units,
   function(index, optionData) {
     var se = document.createElement("select");
     // give it a  name from 'name'
     se.name = 'eft[' + optionData.name + ']';
     // populate it from 'range_from .. range_to
     for(var i=optionData.range_from; i &lt;= optionData.range_to; i++) {
       var option = new Option(i, i);
       if ($.browser.msie) {
         se.add(option);
       } else {
         se.add(option,null);
       }
     }
  
     // add display name to a label in a div block
     $('#meeting-eft-time-unit-headers').append('&lt;span&gt;' + optionData.display_name + '&lt;/span&gt;');
  
     // add select to a div block
     /**
     This gives me the a good select but only the last one processed is displayed
     $('#meeting-eft-time-unit-data').append('&lt;span&gt;').html(se).append('&lt;/span&gt;');
     or
     This gives the text as explained above
     $('#meeting-eft-time-unit-data').append('&lt;span&gt;' + se + '&lt;/span&gt;');
     **/
   });
  </code></pre>