如何使用jQuery在下拉列表中绑定数组值

Question

I am having this array

 var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)");

I want to bind all this array values in option of following select tag using jquery..

    <select class="services_list"></select>

Answer 1

Iterate your array and append option to your select element.

Heres Example:

 var serviceArray = new Array("Living Room", "Dining Room", "Bedroom(s)", "Family Room", "Kitchen", "Den", "Hallway(s)", "Ste(s)", "Bathroom", "Landing(s)"); $(document).ready(function() { for (i = 0; i < serviceArray.length; i++) { $('.services_list').append('<option>' + serviceArray[i] + '</option>') } }); 

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

Answer 2

I'm assuming you want to create a select option list with the array so you can use .each() and .appendTo()

var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)");
$(serviceArray).each(function(){
    $('<option>'+this+'</option>').appendTo('.services_list');
});

DEMO

Answer 3

Try this code

    var options = '';
    var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)");
    for (var i = 0; i < serviceArray.length; i++) {
        options += '<option value="' + serviceArray[i] + '">' + serviceArray[i] + '</option>';
    }
    $('.services_list').html(options);

Answer 4

Try this:

Demo on Fiddle

HTML:

<select class="services_list"></select>

JavaScript:

var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)");

for (i = 0; i < serviceArray.length; i++) {
    var data = '<option>' + serviceArray[i] + '</option>'
    $('select').append(data);
}