fuel ux select add options with ajax

Question

I have a FuelUX select:

<label>Sink</label>
    <div class="select btn-group" id="sinkSelect" style="width: 100%">
       <button type="button" data-toggle="dropdown" class="btn dropdown-toggle" style="width: inherit"><span class="dropdown-label"></span>
         <span class="caret"></span>
       </button>
       <ul id="sink-drop-down" class="dropdown-menu" style="max-height: 200px; overflow-y: scroll;">
         <li><a href="#">*</a>
        </li>
      </ul>
     </div>

and I'm attempting to add entries to it on page load like so:

$.ajax({
     type: "GET",
     url: "/stamp/policyServlet",
     data: {
     annot: "Sinks"
     },
     dataType: "xml",
     success: function(xml) {
     var seen = [];
          $(xml).find('sink').each(function() {
              var d = $(this).attr("desc");
              $("#sink-drop-down").append('<li><a href="#"></a>' + d + '</li>');
          }
});

The entries appear just fine, but the selection highlighting in the drop operates on the lines between the entries, not the entries themselves...in other words, the drop-down is a little wonked out. Is there a more robust approach to doing what I want to do or an easy way to refresh the drop-down so it works out?

Thanks!

Answer 1

Problem has nothing to do with Fuel UX, perhaps unsurprisingly. The option label text was within the li, but not the a tag.

Thus, the correct append command reads:

$("#sink-drop-down").append('<li><a href="#">' + d + '</a></li>');