Adding dropdown options using jquery not working

Question

I'm clearly doing something wrong here, but I'm racking my brans trying to figure it out.

So I have a <select></select>defined thusly:

<select name="entryspeaker" id="entryspeaker">
    <option value="">No associated speaker</option>
</select>

Then in my script, I have an array of 'speaker' objects defined. I run through and I am attempting to add them to the list (as indicated here), so:

for ( speakerIdx in speakerlist ) {
    var speaker = speakerlist[speakerIdx];
    var newOption = $('<option></option>').val(speaker.__id__).html(speaker.name);
    $('#entryspeaker').append( newOption );
    console.log(speaker);
    console.log(newOption);
}

In checking the speaker value in the log, it is definitely fetching the correct object, and I have also confirmed that the newOption value contains a valid <option> object, but it is not being added correctly to the list.

Can someone help point out my stupidity here?

Thanks in advance!

Edit: It looks like this is due to this site using Zurb Foundation's custom-styled drop lists. It seems to be copying the original list upon load, so the new items are not being added to the copied list. I'm investigating that, but it must certainly be the cause of my problem here.

Edit 2*: I found a fix, thanks to this page. It seems that triggering a 'change' forces Foundation to rebuild the list:

$('#entryspeaker').change();

Please post your array.

Ram
– Ram

2013-03-03 20:43:24 +00:00
Commented Mar 3, 2013 at 20:43 — Ram
– Ram, Commented Mar 3, 2013 at 20:43

Rahul R. · Accepted Answer · 2013-09-12 09:52:54Z

1

It is getting added correctly for me with your code..Here is JS fiddle

I used the below array

var speakerlist=[{id:"1", name:"Rsquare"}, {id:"2", name:"Adi"}, {id:"3", name:"Anuj"}];

Are you facing any specific problem? I used chrome and IE9 and it seems to be working fine.

edited Sep 12, 2013 at 9:52

answered Mar 3, 2013 at 20:47

Rahul R.

6,5413 gold badges30 silver badges39 bronze badges

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

3 Comments

Karl White Over a year ago

Hmm... curious. I'm also using Chrome, but nothing (other than the default) shows up. Actually... a thought comes to mind... I realized that this site is using Zurb Foundation, which custom styles the dropdown. I'm pretty sure id does this by means of copying the dropdown into it's own custom dropdown, then hiding the original. I believe I need to find a way of forcing it to re-create its own dropdown after I add the objects. Thanks for the JS fiddle. It definitely helped me rule out bad js/html, and isolate Foundation as the cause.

Rahul R. Over a year ago

did you check the fiddle..it is binding the drop down as well as it is logging the correct object...working fine in IE9 too..

Karl White Over a year ago

As soon as I hit 15 reputation, I'll be sure to come back and upvote you for this help!

Collectives™ on Stack Overflow

Adding dropdown options using jquery not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related