How to bind array values in dropdown using 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>

What do you mean by "bind"? Do you want to create option elements? — user1907906
– user1907906, Commented Oct 16, 2014 at 7:37

Weafs.py · Accepted Answer · 2014-10-16 07:39:54Z

1

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

answered Oct 16, 2014 at 7:39

Weafs.py

23k9 gold badges58 silver badges80 bronze badges

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

Comments

Satpal · Accepted Answer · 2014-10-16 07:39:29Z

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>

answered Oct 16, 2014 at 7:39

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Anton · Accepted Answer · 2014-10-16 07:39:39Z

1

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

answered Oct 16, 2014 at 7:39

Anton

32.6k5 gold badges47 silver badges54 bronze badges

Comments

Robin · Accepted Answer · 2014-10-16 07:39:53Z

1

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

answered Oct 16, 2014 at 7:39

Robin

4716 silver badges18 bronze badges

1 Comment

Satpal Over a year ago

Performance wise generating string and then using html() is better.

Collectives™ on Stack Overflow

How to bind array values in dropdown using jquery

4 Answers 4

Demo on Fiddle

HTML:

JavaScript:

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo on Fiddle

HTML:

JavaScript:

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related