Populate select menu with options from array

Question

I'm having issues populating my select menu with options from array using this approach

var adultAgesArr = ['18 - 20', '21 - 30', '31 - 40', '41 - 50', '51 - 60', '60 +'];
var $ageOptions = '';
$.each(adultAgesArr, function(index, value){
    $ageOptions += $('<option/>', {text: value});
})

and after

$('<select/>').append($ageOptions)

what I get as a result is

<select>
[Object object] [Object object] [Object object] [Object object] [Object object] [Object object]
</select>

Answer 1

You could do this:

$select = $('select');
$.each(adultAgesArr, function(index, value){
  $select.append($('<option/>', {text: value, value: value}));
})

Before it appeared that you were coercing the jQuery objects to a string. I think this way, if you cache select beforehand, is just as efficient.

DEMO

Answer 2

Hope this helps:

<select id="menu"></select>

var populate = function() {
    var adultAgesArr = ['18 - 20', '21 - 30', '31 - 40', '41 - 50', '51 - 60', '60 +'],
    select = $('#menu')[0];

    $.each(adultAgesArr, function(index, value){
        var opt = document.createElement('option');
        opt.value = value;
        opt.innerHTML = value;
        select.appendChild(opt);
    });
}

populate();

Answer 3

For creating an option instead of doing this:

 $ageOptions += $("< option/>", {text: value});

Is better to do this:

 new Option("option text", "value")

then append.