Question

I’ve spent some time trying to find an elegant and cross browser solution but was unable. I’m trying to dynamically create a drop down. Here is my html:

...
<span id="currencies">
</span>
...

In my script I’m trying to do the following:

• Create a select element
• Put, say, 4 options into it – ‘AAA’, ‘BBB’, ‘CCC’, and ‘DDD’
• Append the select element to $(‘#currencies’)

I am assuming that for the code to be cross browser it should be written using jQuery. When I say elegant I mean possibly trying to avoid too much markup, for example, something like this:

// THIS IS NOT A WORKING CODE
$('#currencies').appendSelect().addOption('AAA', 'AAA').addOption('BBB', 'BBB')...

Maybe somebody has some tip. Thank you.

Answer 1

I would probably do it like this:

var $s = $('<select/>').appendTo($('#currencies'));
$.each(['AAA','BBB','CCC','DDD'],function(i,text){
    $s.append($('<option/>',{value:text,html:text}));
});