I'm using a $.get to do an ajax call to a sql stored procedure & return data in an XML format.  In the callback part of the get, I create a function that builds a dropdown from the items returned.  I also build an additional <option> line & prepend it to the select.  I've tried both the select that's part of jQuery & the .selectable that's part of jQuery-ui.

The code I'm using to build the box follows:

2. $.get(sURL, function(data) {
3. var select = $("#dList");
4. //var blankline = $("<option value='' selected='selected'></option>");
5. //select.prepend(blankline);
6. var selectline = $("<option value='0' selected='selected'>Select Destination</option>");
7. select.prepend(selectline);
8. $(data).find("Row").each(function() {
9. var mgid = $(this).find("MessageGroupID").text();
10. var gname = $(this).find("GroupName").text();
11. var option = $("<option>" + gname + "</option>");
12. option.attr("value", mgid);
13. select.append(option);
14. });
15. $("#dList").selectable();
16. });

The code I use to remove the instruction that's currently shown (or the blank line) is as follows:

2. $("#dList").one('mousedown', function() {
3. $("option:first",this).remove();
4. });

The XML that is the input to the dropdown is:

2. <?xml version="1.0" encoding="UTF-8"?>
3. <Rowsets DateCreated="2013-05-08T08:42:18" EndDate="2013-05-08T08:42:18" StartDate="2013-05-08T07:42:18" Version="1.1.1">
4. <Rowset>
5. <Columns>
6. <Column Description="MessageGroupID" MaxRange="1" MinRange="0" Name="MessageGroupID" SQLDataType="4" SourceColumn="MessageGroupID"/>
7. <Column Description="GroupName" MaxRange="1" MinRange="0" Name="GroupName" SQLDataType="12" SourceColumn="GroupName"/>
8. </Columns>
9. <Row>
10. <MessageGroupID>1</MessageGroupID>
11. <GroupName>First Shift</GroupName>
12. </Row>
13. <Row>
14. <MessageGroupID>4</MessageGroupID>
15. <GroupName>Alternate First Shift</GroupName>
16. </Row>
17. <Row>
18. <MessageGroupID>7</MessageGroupID>
19. <GroupName>Temporary First Shift</GroupName>
20. </Row>
21. </Rowset>
22. </Rowsets>

What is happening though is:

• The instruction (or blank line) gets removed from the other items in the dropdown when the box is clicked on.  
• However, what happens is that now the first row of data in the dropdown is now showing in the dropdown box, even though I haven't "selected" it, only clicked on the down arrow next to the dropdown.
• If I do click on the first row, it doesn't trigger a change.  
• Clicking on other rows does trigger a change, and clicking BACK on to the first row then will trigger a change (but only after clicking on a different row first).

Thanks!