Populate dropdown select with array using jQuery

Question

I am trying to populate a dropdown select with an array using jQuery.

Here is my code:

        // Add the list of numbers to the drop down here
        var numbers[] = { 1, 2, 3, 4, 5};
        $.each(numbers, function(val, text) {
            $('#items').append(
                $('<option></option>').val(val).html(text)
            );            
        // END

But I'm getting an error. The each function is something I am got off this website.

Is it bombing out because I'm using a one-dimensional array? I want both the option and the text to be the same.

Appending items one at a time on the DOM is considered to be very slow and is highly not advised. Way more performatic is to build a string and append it after the loop — Fabiano Soriani
– Fabiano Soriani, Commented Aug 10, 2010 at 4:58

fbarikzehy · Accepted Answer · 2015-05-11 15:26:36Z

105

Try for loops:

var numbers = [1, 2, 3, 4, 5];

for (var i=0;i<numbers.length;i++){
   $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}

Much better approach:

var numbers = [1, 2, 3, 4, 5];
var option = '';
for (var i=0;i<numbers.length;i++){
   option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
}
$('#items').append(option);

edited May 11, 2015 at 15:26

fbarikzehy

5,5252 gold badges38 silver badges41 bronze badges

answered Aug 10, 2010 at 4:41

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

webwake Over a year ago

If the array you are dealing with are not numbers or not from a safe source you should use the 1st technique listed except using .text(number[i]) instead of .html(number[i]). This will ensure you don't risk any injection exploits.

Dave Jarvis · Accepted Answer · 2012-06-20 22:37:36Z

44

The array declaration has incorrect syntax. Try the following, instead:

var numbers = [ 1, 2, 3, 4, 5]

The loop part seems right

$.each(numbers, function(val, text) {
            $('#items').append( $('<option></option>').val(val).html(text) )
            }); // there was also a ) missing here

As @Reigel did seems to add a bit more performance (it is not noticeable on such small arrays)

edited Jun 20, 2012 at 22:37

Dave Jarvis

31.3k43 gold badges186 silver badges326 bronze badges

answered Aug 10, 2010 at 4:55

Fabiano Soriani

8,6369 gold badges45 silver badges59 bronze badges

1 Comment

RSM Over a year ago

This is the best option if you have predefined keys

Cheeso · Accepted Answer · 2012-04-17 05:34:16Z

8

You can also do this:

var list = $('#items')[0]; // HTMLSelectElement
$.each(numbers, function(index, text) { 
    list.options[list.options.length] = new Option(index, text);
});

answered Apr 17, 2012 at 5:34

Cheeso

193k106 gold badges486 silver badges734 bronze badges

Comments

Ed Barahona · Accepted Answer · 2015-05-17 17:06:10Z

4

var qty = 5;
var option = '';
for (var i=1;i <= qty;i++){
   option += '<option value="'+ i + '">' + i + '</option>';
}
$('#items').append(option);

answered May 17, 2015 at 17:06

Ed Barahona

7716 silver badges7 bronze badges

Comments

florex · Accepted Answer · 2015-07-29 12:17:45Z

A solution is to create your own jquery plugin that take the json map and populate the select with it.

(function($) {     
     $.fn.fillValues = function(options) {
         var settings = $.extend({
             datas : null, 
             complete : null,
         }, options);

         this.each( function(){
            var datas = settings.datas;
            if(datas !=null) {
                $(this).empty();
                for(var key in datas){
                    $(this).append('<option value="'+key+'"+>'+datas[key]+'</option>');
                }
            }
            if($.isFunction(settings.complete)){
                settings.complete.call(this);
            }
        });

    }

}(jQuery));

You can call it by doing this :

$("#select").fillValues({datas:your_map,});

The advantages is that anywhere you will face the same problem you just call

 $("....").fillValues({datas:your_map,});

Et voila !

You can add functions in your plugin as you like

Seal_Seal · Accepted Answer · 2020-06-07 08:56:56Z

1

Since I cannot add this as a comment, I will leave it here for anyone who finds backticks to be easier to read. Its basically @Reigel answer but with backticks

var numbers = [1, 2, 3, 4, 5];
var option = ``;
for (var i=0;i<numbers.length;i++){
   option += `<option value=${numbers[i]}>${numbers[i]}</option>`;
}
$('#items').append(option);

answered Jun 7, 2020 at 8:56

Seal_Seal

406 bronze badges

Comments

HaveNoDisplayName · Accepted Answer · 2015-05-11 19:48:06Z

The solution I used was to create a javascript function that uses jquery:

This will populate a dropdown object on the HTML page. Please let me know where this can be optimized - but works fine as is.

function util_PopulateDropDownListAndSelect(sourceListObject, sourceListTextFieldName, targetDropDownName, valueToSelect)
{
    var options = '';

    // Create the list of HTML Options
    for (i = 0; i < sourceListObject.List.length; i++)
    {
        options += "<option value='" + sourceListObject.List[i][sourceListTextFieldName] + "'>" + sourceListObject.List[i][sourceListTextFieldName] + "</option>\r\n";
    }

    // Assign the options to the HTML Select container
    $('select#' + targetDropDownName)[0].innerHTML = options;

    // Set the option to be Selected
    $('#' + targetDropDownName).val(valueToSelect);

    // Refresh the HTML Select so it displays the Selected option
    $('#' + targetDropDownName).selectmenu('refresh')
}

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

Collectives™ on Stack Overflow

Populate dropdown select with array using jQuery

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related