Dropdown List - change width on opening?

[Nth_]

Hello,

I am currently creating my first web program using Visual Studio 2008 (asp.net with c#) so am probably going about many things the wrong way, but it is to be expected!

The issue in question:

-I have a dropdownlist(ddl), which is populated from a SQLDataSource.
-The text in the ddl is "ID : Firstname : Surname" (ie. concatenated fields from the db)
-I would like to display the ddl at a set width on the page 'normally' (110px wide for example) and when the user selects (opens) the ddl it will increase in width to accomodate the longest item it holds. Then when the user selects an item/moves focus away from the ddl, the ddl will go back to being it's normal width (110px)

(eg. Ddl is 110px wide, user opens the list, in the data source there is a record which has a very long name – taking up 200pixels in width, the ddl opens up at 200px or the equivalent to display all the information on screen, user selects an item or moves to a different object, ddl returns to normal 110px width)

I have found some javescript code which is along the right lines, but is buggy and I have no clue how to do anything in javascript at this moment in time!

<script type="text/javascript">
    function ChangeListBoxWidth(obj)
    {
        obj.style.width = '';
    }
    function ResetListBoxWidth(obj,width)
    {
        obj.style.width = width;
    }
</script>

This is called from the following code for the ddl:

asp:DropDownList ID="ddlAssTutAdd" runat="server" onclick="javascript:ChangeListBoxWidth(this);" onblur="javascript:ResetListBoxWidth(this,110)"
                                        DataSourceID="SqlDataSource_TutAss"
                                        DataTextField="StaffName" DataValueField="StaffID" Width="110px"
                                        AppendDataBoundItems="true">
                                        <asp:ListItem Value="0" Text="Please Select..." />
                                    </asp:DropDownList>
                                    <asp:SqlDataSource ID="SqlDataSource_TutAss" runat="server"
                                        ConnectionString="<%$ ConnectionStrings:CenCoordConStr %>"
                                        SelectCommand="SELECT Staff.StaffID + ' : ' + Staff.StaffFirstname + ' ' + Staff.StaffSurname AS StaffName, Staff.StaffID FROM Staff INNER JOIN Assessors ON Staff.StaffID = Assessors.StaffID">
                                    </asp:SqlDataSource>

The javascript seems to work in essence, but it requires the user to select the ddl twice (once to set the focus seemingly, then the next time they click it will actually open up the list) obviously this is not ideal!

Hopefully this makes sense, I have had to post this from home as work’s antivirus has blocked access to posting/previewing on these forums due to suspected malware(!?) so will have to reply out of office hours!

Thanks in advance for any help,
Nathan