CODEWITHSUNDEEP
jqueryhtmlarraysdrop-down-menu
Pavel Zagalsky
Pavel Zagalsky

Reputation: 1636

Jquery - Populate DropDown box with contents of array

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!!

Upvotes: 13

Views: 30232

Answers (6)

Du-Lacoste
Du-Lacoste

Reputation: 12757

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

Upvotes: 0

Dr Fred
Dr Fred

Reputation: 989

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

Upvotes: 1

danielrw7
danielrw7

Reputation: 120

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

Upvotes: 6

jpbourbon
jpbourbon

Reputation: 151

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

Upvotes: 2

Byron Singh
Byron Singh

Reputation: 1398

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

Upvotes: 3

TauterTwiggy
TauterTwiggy

Reputation: 317

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
}

Upvotes: 9

Related Questions