jQuery dropdown box always shows first item

Question

In a jQuery function I am working with, I use a .get to return some XML data & then use it to populate a drop down box. The code that I use to build the <OPTION> tags in the select follows:

$.get(sURL, function(data) {
    var select = $("#dList");
    $(data).find("Row").each(function() {
    var mgid = $(this).find("MessageGroupID").text();
    var gname = $(this).find("GroupName").text();
    var option = $("<option>" + gname + "</option>");
    option.attr("value", mgid);
    select.append(option);
    });
});

The XML that is being parsed is:

<?xml version="1.0" encoding="UTF-8"?>
<Rowsets DateCreated="2013-05-07T11:33:51" EndDate="2013-05-07T11:33:51" StartDate="2013-05-07T10:33:51" Version="1.1.1">
<Rowset>
<Columns>
<Column Description="MessageGroupID" MaxRange="1" MinRange="0" Name="MessageGroupID" SQLDataType="4" SourceColumn="MessageGroupID"/>
<Column Description="GroupName" MaxRange="1" MinRange="0" Name="GroupName" SQLDataType="12" SourceColumn="GroupName"/>
</Columns>
<Row>
<MessageGroupID>1</MessageGroupID>
<GroupName>First Shift</GroupName>
</Row>
<Row>
<MessageGroupID>4</MessageGroupID>
<GroupName>Alternate First Shift</GroupName>
</Row>
<Row><MessageGroupID>7</MessageGroupID>
<GroupName>Temporary First Shift</GroupName>
</Row>
</Rowset>
</Rowsets>

I call the function to load the drop down in the document.ready part of the script.

When the 3 rows are returned, the first row is always showing in the drop down box. Or, if I prepend a blank line:

var blankline = $("<option value='' selected='selected'></option>");

I get the blank drop down box, but now have 4 items in the drop down (a blank + the 3 I should have). I thought that setting the selectedindex= -1 would do it, but it has no effect since these items aren't static.

How do you get the drop down box to have both a blank/empty display value, and still have the appropriate number of items in the actual option list?

Thanks!

S

Answer 1

$(document).ready(function () {
    $('select').click(function(){
        $(this).children(':eq("0")').hide();
        $(this).unbind('click');
    });
}); // untested Code

EDIT:

PLease try this...

$('select').one('mousedown',function(){
    $("option:first",this).remove();
});

I was myself confused in this.. Finally asked this on SO and finally got a beautiful answer..