title: Adding dropdown options using jquery not working
body: <p>I'm clearly doing something wrong here, but I'm racking my brans trying to figure it out.</p>
  
  <p>So I have a <code>&lt;select&gt;&lt;/select&gt;</code>defined thusly:</p>
  
  <pre><code>&lt;select name="entryspeaker" id="entryspeaker"&gt;
      &lt;option value=""&gt;No associated speaker&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>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 <a href="https://stackoverflow.com/questions/317095/how-do-i-add-options-to-a-dropdownlist-using-jquery">here</a>), so:</p>
  
  <pre><code>for ( speakerIdx in speakerlist ) {
      var speaker = speakerlist[speakerIdx];
      var newOption = $('&lt;option&gt;&lt;/option&gt;').val(speaker.__id__).html(speaker.name);
      $('#entryspeaker').append( newOption );
      console.log(speaker);
      console.log(newOption);
  }
  </code></pre>
  
  <p>In checking the <code>speaker</code> value in the log, it is definitely fetching the correct object, and I have also confirmed that the <code>newOption</code> value contains a valid <code>&lt;option&gt;</code> object, but it is not being added correctly to the list.</p>
  
  <p>Can someone help point out my stupidity here?</p>
  
  <p>Thanks in advance!</p>
  
  <hr>
  
  <p><strong>Edit</strong>: 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.</p>
  
  <hr>
  
  <p><strong>Edit 2*</strong>: I found a fix, thanks to <a href="https://github.com/zurb/foundation/issues/413" rel="nofollow noreferrer">this page</a>. It seems that triggering a 'change' forces Foundation to rebuild the list:</p>
  
  <pre><code>$('#entryspeaker').change();
  </code></pre>