Using jquery append to add option values into a select element not working

Question

I'm looking to dynamically populate a select element with names of items that are stored into an array.

For some reason it's not working and I'm not sure why.

HTML:

<div class="col-md-4 col-md-offset-4">
    <select class="select1">
    </select>
        and
    <select class="select2">
    </select>
</div>

Note that I'm using bootstrap for layout.

Here's the jquery I'm using to try and populate ".select1"

JQUERY:

select: function() {
    $.each(state.greens, function(index, value) {
        $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>");
    });
}

Note that the function 'select' is stored within an object called 'display'.

state.greens is the name of the array I'm trying to access.

So at the end of my html page I call display.select(); to call the function.

No error messages are showing up in the console.

Also, I saw this question: Appending options to select using jQuery doesn't work

but was looking for a jquery centric answer and this seems like it ought to work.

Is it possible state.greens is not within scope of your function? Try consoling state.greens.length on the first line of your function. I would also avoid naming your function 'select'. — Ryan Neuffer
– Ryan Neuffer, Commented Jul 14, 2015 at 1:05
Definitely your code works. See this fiddle.jshell.net/0z38v1bd ... as @RyanNeuffer said, make sure state.greens is in the same context of your select method — leo.fcx
– leo.fcx, Commented Jul 14, 2015 at 1:23
@RyanNeuffer - I followed your recommendation and the length of state.greens was 12.......which is what it should be. Any ideas? — Jonathan Bechtel
– Jonathan Bechtel, Commented Jul 14, 2015 at 11:47
The code works: jsfiddle.net/h5kuhL6x so there's something else going on that's not reflected in your example/setup. Console out $(".select1").length and ensure it exists in the DOM when you are calling display.select(); — Ryan Neuffer
– Ryan Neuffer, Commented Jul 14, 2015 at 13:46

Thiago Machado · Accepted Answer · 2015-08-11 19:54:53Z

3

You can do in that way:

$.each(state.greens, function(index, value) {
    $('.select1').append($('<option>', {
        value: index ,
        text: state.greens[index].name
    }));
});

edited Aug 11, 2015 at 19:54

answered Aug 10, 2015 at 18:50

Thiago Machado

414 bronze badges

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

Comments

Barmar · Accepted Answer · 2016-12-15 21:24:26Z

0

When you append you are basically adding to the .innerHTML value of a container. This works for most elements except for <select>. You'll have to add elements properly for the DOM to pick it up:

var select=document.getElementById('select1');
var option=document.createElement('option');
option.setAttribute('value','option1');
option.innerHTML='Option 1';
select.appendChild(option);

edited Dec 15, 2016 at 21:24

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Jul 14, 2015 at 1:11

Schien

3,9231 gold badge20 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using jquery append to add option values into a select element not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related