How to bind <select> from list of comma separated values in JQuery?

The answer is here: What is the best way to add options to a select from an array with jQuery?

Loop through your languages in a for loop, and use the code in that answer above.

var languages = [ 'AFRIKAANS : af', 'ALBANIAN : sq', 'AMHARIC : am', ] $.each(languages,function(index,elem){ $("#langsel").append( $("<option/>").val(elem.split(':')[1]).text(elem.split(':')[0]) ); }); 

fiddle http://jsfiddle.net/3dFgg/

The quickest (to type) way to do it would be to first build the HTML string, and then insert it into the <select>:

var languages = { /* ... */ }, str = '', hop = Object.prototype.hasOwnProperty, x; for (x in languages) { if (hop.call(languages, x)) { str += '<option value="' + languages[x] + '">' + x + '</option>'; } } document.getElementById('langsel').innerHTML += str; 

You could do something like this:

var sel = $("#langsel"); var html = ""; var items = Languages; html = $("<option></option>").text("Select a Language").val(""); sel.append(html); html = ""; for (var index in items) { html = $("<option></option>").text(index).val(items[index]); sel.append(html); html = ""; } 

jsFiddle http://jsfiddle.net/FXta5/

You can certainly do this manually, but for fun, this is the sort of thing jQuery Templates are designed to do. The {{each}} tag will let you iterate over an array or object, building some dynamic HTML as you go.

First set up the template:

<script id="optionTemplate" type="text/x-jquery-tmpl"> {{each(lang,abbrev) $data}} <option value="${abbrev}">${lang}</option> {{/each}} </script> 

Here's the empty HTML <select> to be filled with new <option> tags:

<select id="langsel" name="selector"> <option value="">Select a language</option> </select> 

Your language object:

var langs = { 'AFRIKAANS': 'af', 'ALBANIAN': 'sq', 'AMHARIC': 'am', 'ARABIC': 'ar', 'ARMENIAN': 'hy', 'AZERBAIJANI': 'az' }; 

Then the easy part:

$("#optionTemplate").tmpl(langs).appendTo("#langsel"); 

Here's a working example: http://jsfiddle.net/redler/nHtH3/