Javascript looping through an object to populate an HTML select

Question

I have this java script code:

var LANGS = {
    "C#": [10, "text/x-csharp"],
    "C/C++": [7, "text/x-c++src"],
    "Clojure": [2, "text/x-clojure"],
    "Java": [8, "text/x-java"],
    "Go": [6, "text/x-go"],
    "Plain JavaScript": [4, "text/javascript"],
    "PHP": [3, "text/x-php"],
    "Python": [0, "text/x-python"],
    "Ruby": [1, "text/x-ruby"],
    "Scala": [5, "text/x-scala"],
    "VB.NET": [9, "text/x-vb"],
    "Bash": [11, "text/x-bash"],
    "Objective-C": [12,"text/x-objectivec"],
    "MySQL": [13,"text/x-sql"],
    "Perl": [14, "text/x-perl"],
}

I right now I have the following code to show that information as an alert:

$('#langhelp').on('click', function () {
            var msg = "These are the languages and their langids: \n[LANGID]: [LANGUAGE]\n";
            var langs = [];
            for (var i in LANGS) {
                msg += LANGS[i][0] + ": " + i + "\n";
            }
            alert(msg);
        });

But what I would like to do is populate an HTML select with this data only I can not figure out how to do so, I have looked at this question but don't see how to append the options to the select element.

Answer 1

Just loop over the list and create options, then append them to select element. Finally, append select into desired container.

In my example, I use $.fn.map to iterate over the list of items and create array of option elements. This array (actually it's jQuery array-like object) is then appended as html content to the newly created select element.

 var LANGS = { "C#": [10, "text/x-csharp"], "C/C++": [7, "text/x-c++src"], "Clojure": [2, "text/x-clojure"], "Java": [8, "text/x-java"], "Go": [6, "text/x-go"], "Plain JavaScript": [4, "text/javascript"], "PHP": [3, "text/x-php"], "Python": [0, "text/x-python"], "Ruby": [1, "text/x-ruby"], "Scala": [5, "text/x-scala"], "VB.NET": [9, "text/x-vb"], "Bash": [11, "text/x-bash"], "Objective-C": [12,"text/x-objectivec"], "MySQL": [13,"text/x-sql"], "Perl": [14, "text/x-perl"], }; var $select = $('<select>', { html: $.map(LANGS, function(value, key) { return '<option value="' + value[0] + '">' + key + '</option>'; }) }); $select.appendTo('body'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

Here is your:

  var LANGS = { "C#": [10, "text/x-csharp"], "C/C++": [7, "text/x-c++src"], "Clojure": [2, "text/x-clojure"], "Java": [8, "text/x-java"], "Go": [6, "text/x-go"], "Plain JavaScript": [4, "text/javascript"], "PHP": [3, "text/x-php"], "Python": [0, "text/x-python"], "Ruby": [1, "text/x-ruby"], "Scala": [5, "text/x-scala"], "VB.NET": [9, "text/x-vb"], "Bash": [11, "text/x-bash"], "Objective-C": [12, "text/x-objectivec"], "MySQL": [13, "text/x-sql"], "Perl": [14, "text/x-perl"], } $.each(LANGS, function(key, keyValue) { var option = $('<option />').prop('value', keyValue[0]).text(key); $('select').append(option); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select></select> 

Answer 3

you can also try something like this (plain js):

 var LANGS = { "C#": [10, "text/x-csharp"], "C/C++": [7, "text/x-c++src"], "Clojure": [2, "text/x-clojure"], "Java": [8, "text/x-java"], "Go": [6, "text/x-go"], "Plain JavaScript": [4, "text/javascript"], "PHP": [3, "text/x-php"], "Python": [0, "text/x-python"], "Ruby": [1, "text/x-ruby"], "Scala": [5, "text/x-scala"], "VB.NET": [9, "text/x-vb"], "Bash": [11, "text/x-bash"], "Objective-C": [12,"text/x-objectivec"], "MySQL": [13,"text/x-sql"], "Perl": [14, "text/x-perl"], } //create the select element var sel = document.createElement('select'); //foreach key create option element and append to select element for(key in LANGS){ var opt = document.createElement('option'); opt.value = key; opt.innerHTML = key; sel.appendChild(opt); } //once select is poplulated, append document.body.appendChild(sel);