How to bind <select> from a comma separated list of values ​​in jQuery?

Question

How can we bind the select tag with variable data? ..

Here is my sample code here.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script> var google.language.Languages = { 'AFRIKAANS' : 'af', 'ALBANIAN' : 'sq', 'AMHARIC' : 'am', 'ARABIC' : 'ar', 'ARMENIAN' : 'hy', 'AZERBAIJANI' : 'az' ... } </script> 

I want to bind my select tag using the above languages

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

How to bind " langsel " to the above variable.?

I need the output as below :

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

Answer 1

 $(function() { var languages = { 'AFRIKAANS' : 'af', 'ALBANIAN' : 'sq', 'AMHARIC' : 'am', 'ARABIC' : 'ar', 'ARMENIAN' : 'hy', 'AZERBAIJANI' : 'az' } var sel = $('#langsel'); $.each(languages, function(key, value) { sel.append('<option value="'+value+'">'+key+'</option>'); }); }); 

Working script: http://jsfiddle.net/qtb6S/

Answer 2

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

Scroll your languages ​​in a for loop and use the code in this answer above.

Answer 3

 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/

Answer 4

The fastest (to print) way to do this is to first build an HTML string and then paste it into <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; 

Answer 5

You can 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/

Answer 6

You can, of course, do this manually, but for fun it's something like jQuery Templates . The {{each}} tag allows you to iterate over an array or object, creating dynamic HTML as you move.

First configure 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 populate 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 simple part:

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

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