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.

What should be the label and the value of the option, will `text/x-csharp` be used? — dfsq, Jun 27 '15 at 08:51
No sorry the name should be `"C#"` and the value `"10"` etc... the `text/****` is not important — Otis Wright, Jun 27 '15 at 08:55

score 1 · Accepted Answer · answered Jun 27 '15 at 09:00

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>

hungndv · Answer 2 · 2015-06-27T09:07:39.450

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>

score 0 · Answer 3 · answered Jun 27 '15 at 09:10

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

Javascript looping through an object to populate an HTML select

3 Answers3