0

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();
Community
  • 1
  • 1
Karl White
  • 497
  • 1
  • 5
  • 13

1 Answers1

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.

Rahul R.
  • 5,965
  • 3
  • 27
  • 38
  • 1
    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. – Karl White Mar 03 '13 at 20:51
  • 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.. – Rahul R. Mar 03 '13 at 20:52
  • As soon as I hit 15 reputation, I'll be sure to come back and upvote you for this help! – Karl White Mar 03 '13 at 20:54