Trying to create dynamic select boxes with Javascript and jQuery

Question

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.

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).

So far, I can either get the last select created in the following code displayed (but without span tags)

$('#meeting-eft-time-unit-data').append('<span>').html(se).append('</span>');

or I just get the following list ...

$('#meeting-eft-time-unit-data').append('<span>' + se + '</span>');
object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement][object HTMLSelectElement]

Here's the 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 <= 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('<span>' + optionData.display_name + '</span>');

   // 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('<span>').html(se).append('</span>');
   or
   This gives the text as explained above
   $('#meeting-eft-time-unit-data').append('<span>' + se + '</span>');
   **/
 });

sje397 · Accepted Answer · 2010-08-14 15:28:31Z

1

Try:

$('#meeting-eft-time-unit-headers').append($('<span/>').append(se));

answered Aug 14, 2010 at 15:28

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ants Over a year ago

That's brilliant. Thank you. Is that a shortcut and if so, is there a beginner's way to write it?

sje397 Over a year ago

No it's not really a shortcut (in fact there's probably a shorter way). $('<span/>') creates a span DOM element - I've never seen any jquery where you have to specifically add the start and end tag. Append is about appending elements, not text.

sje397 Over a year ago

@ants - you might want to click the tick next to the answer - it helps with your '%accepted' score ;)

Collectives™ on Stack Overflow

Trying to create dynamic select boxes with Javascript and jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related