Jquery - Populate DropDown box with contents of array

Question

This supposed to be really easy but for some reason I cannot find an answer for it online.. I have an array that I receive after AJAX request and I want to populate its content a simple dropdown box. So let's say that's my array:

var workers = ["Steve", "Nancy", "Dave"];

And I have a simple dropdown box which I want to populate dynamically depending what I'll get from an AJAX call:

<div id='dropdown'>
  <select>
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
  </select>
</div>

How can I do it properly? Thanks a lot!!

TauterTwiggy · Accepted Answer · 2014-12-11 19:54:57Z

9

Simply create a new Jquery object then append it to the select list. Easier if you just give the select an id instead of the div above it.

for(var i=0; i< workers.length;i++)
{
//creates option tag
  jQuery('<option/>', {
        value: workers[i],
        html: workers[i]
        }).appendTo('#dropdown select'); //appends to select if parent div has id dropdown
}

answered Dec 11, 2014 at 19:54

TauterTwiggy

3171 silver badge11 bronze badges

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

Comments

LegionDev · Accepted Answer · 2016-08-10 15:04:08Z

6

If you have the select like this:

<div id='dropdown'>
   <select>
   </select>
</div>

You could use something like this:

for(var i = 0; i < workers.length; i++) {
   $('#dropdown select').append('<option value='+i+'>'+workers[i]+'</option>');
}

edited Aug 10, 2016 at 15:04

LegionDev

1,4814 gold badges18 silver badges30 bronze badges

answered Dec 11, 2014 at 19:52

danielrw7

1206 bronze badges

Comments

Byron Singh · Accepted Answer · 2014-12-11 20:11:07Z

3

If you always have 3 options in the dropdown you can simply change the values of the option:

var workers = ["Steve", "Nancy", "Dave"];
for(var i in workers) {
  $("#dropdown option").eq(i).html(workers[i]);
  $("#dropdown option").eq(i).val(workers[i]);
}

If you want to change the number of options too, you may want to remove all existing options and re-add all of them, like this:

var workers = ["Steve", "Nancy", "Dave"];
$("#dropdown select").empty();
for(var i in workers) {
  $("#dropdown select").append('<option value='+i+'>'+workers[i]+'</option>');
}

answered Dec 11, 2014 at 20:11

Byron Singh

1,3981 gold badge13 silver badges15 bronze badges

Comments

jpbourbon · Accepted Answer · 2014-12-11 20:31:02Z

2

You have to loop through the array and add the options to the select by creating them on the DOM and setting their values. Try this:

        var workers = ["Steve", "Nancy", "Dave"];
        $.each(workers,function(){
            var option = document.createElement('option');
            $('#dropdown select').append($(option).attr('value',this).html(this));
        });

answered Dec 11, 2014 at 20:31

jpbourbon

1511 silver badge5 bronze badges

Comments

Dr Fred · Accepted Answer · 2017-07-10 18:17:46Z

1

Using the $.map() function, you can do this in a more elegant way :

$('#dropdown select').html( $.map(workers, function(i){
     return '<option value="' + i + '">'+ i + '</option>';
}).join('') );

answered Jul 10, 2017 at 18:17

Dr Fred

9899 silver badges15 bronze badges

Comments

Du-Lacoste · Accepted Answer · 2018-05-15 03:08:04Z

0

You can try like this as well.

It worked for me.

// Declare the array you need 

var workers = ["Steve", "Nancy", "Dave"];

// Make a default value to the drop down list. This will load before the for each append data. This acts as a default value.

$('#dropdown select').append('<option value="select" selected="selected">Select Names</option>');

// Using for each loop iterate the values in the array declared

     $.each(workers, function (i, item) {
        $('#dropdown select').append($('<option></option>', {
            value: item,
            html : item
        }));
    });

edited May 15, 2018 at 3:08

answered May 15, 2018 at 2:58

Du-Lacoste

13k3 gold badges80 silver badges58 bronze badges

Collectives™ on Stack Overflow

Jquery - Populate DropDown box with contents of array

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related