How to make a dropdownlist show selected value at top of dropdown instead of bottom?

Question

Edit: This happens in Chrome but not IE

This is such a silly, useless little question but I have a client asking if the following is possible. SO, it's killing me to know now.

I have created a DropDownList in an aspx page that is using C# code-behind (however, my example here has no code-behind for simplicity of stating my question).

See my example DropDownList. I have 46 options in this list see: A and B. Assume user selects an item in the mid-range of the list - (see: C). When the user goes back into the DropDown, it shows the selected value at the bottom (see: C again).

Is there a way to tell \ force a DropDownList to display the selected index \ value \ item at the TOP of the available values list (see: D)?

This example is using very plain code:

<asp:UpdatePanel ID="DropDownTestUpdatePanel" runat="server">
    <ContentTemplate>    
        <asp:Panel id="DropDownTestPanel" runat="server">
            <asp:DropDownList id="ColorList"
                AutoPostBack="True"
                runat="server">
                <asp:ListItem Value="1 ">  1 </asp:ListItem>
                <asp:ListItem Value="2 ">  2 </asp:ListItem>
                <asp:ListItem Value="3 ">  3 </asp:ListItem>
                <asp:ListItem Value="4 ">  4 </asp:ListItem>
                <asp:ListItem Value="5 ">  5 </asp:ListItem>
                <asp:ListItem Value="6 ">  6 </asp:ListItem>
                <asp:ListItem Value="7 ">  7 </asp:ListItem>
                <asp:ListItem Value="8 ">  8 </asp:ListItem>
                <asp:ListItem Value="9 ">  9 </asp:ListItem>
                <asp:ListItem Value="0 ">  0 </asp:ListItem>
                <asp:ListItem Value="10"> 10 </asp:ListItem>
                <asp:ListItem Value="11"> 11 </asp:ListItem>
                <asp:ListItem Value="12"> 12 </asp:ListItem>
                <asp:ListItem Value="13"> 13 </asp:ListItem>
                <asp:ListItem Value="14"> 14 </asp:ListItem>
                <asp:ListItem Value="15"> 15 </asp:ListItem>
                <asp:ListItem Value="16"> 16 </asp:ListItem>
                <asp:ListItem Value="17"> 17 </asp:ListItem>
                <asp:ListItem Value="18"> 18 </asp:ListItem>
                <asp:ListItem Value="19"> 19 </asp:ListItem>
                <asp:ListItem Value="20"> 20 </asp:ListItem>
                <asp:ListItem Value="21"> 21 </asp:ListItem>
                <asp:ListItem Value="22"> 22 </asp:ListItem>
                <asp:ListItem Value="23"> 23 </asp:ListItem>
                <asp:ListItem Value="24"> 24 </asp:ListItem>
                <asp:ListItem Value="25"> 25 </asp:ListItem>
                <asp:ListItem Value="26"> 26 </asp:ListItem>
                <asp:ListItem Value="27"> 27 </asp:ListItem>
                <asp:ListItem Value="28"> 28 </asp:ListItem>
                <asp:ListItem Value="29"> 29 </asp:ListItem>
                <asp:ListItem Value="30"> 30 </asp:ListItem>
                <asp:ListItem Value="31"> 31 </asp:ListItem>
                <asp:ListItem Value="32"> 32 </asp:ListItem>
                <asp:ListItem Value="33"> 33 </asp:ListItem>
                <asp:ListItem Value="34"> 34 </asp:ListItem>
                <asp:ListItem Value="35"> 35 </asp:ListItem>
                <asp:ListItem Value="36"> 36 </asp:ListItem>
                <asp:ListItem Value="37"> 37 </asp:ListItem>
                <asp:ListItem Value="38"> 38 </asp:ListItem>
                <asp:ListItem Value="39"> 39 </asp:ListItem>
                <asp:ListItem Value="40"> 40 </asp:ListItem>
                <asp:ListItem Value="41"> 41 </asp:ListItem>
                <asp:ListItem Value="42"> 42 </asp:ListItem>
                <asp:ListItem Value="43"> 43 </asp:ListItem>
                <asp:ListItem Value="44"> 44 </asp:ListItem>
                <asp:ListItem Value="45"> 45 </asp:ListItem>
                <asp:ListItem Value="46"> 46 </asp:ListItem>
           </asp:DropDownList>
        </asp:Panel>     
    </ContentTemplate>
</asp:UpdatePanel>     

I have searched and searched... and searched online for answers. But it is hard to find an answer to a question when you cannot phrase it well.

Thank you all in advance for any help you might offer.

Editing to rephrase for clarity sake: Pretend you're a user who works with one DropDownList all day long. For example, you get orders from customer numbers that are listed in order (see: image above). Each time you move to your next order, you have to go click on the customer number in the DropDownList. Well, once you get to customer #20 (see A above), you now have to click the DropDown and scroll \ move \ click down one to get your next number. (I know, I know, it's set to focus on load so one could really be faster with arrow keys or typing to move the list but ... it's a customer - whaddya want?).
Anyway, you can see how it would be more beneficial to have the DropDownList behave like D above rather than C above when you go click on it to select your next customer, right?

Answer 1

I had a similar problem. This fixed my issue:

protected void Page_PreRender(object sender, EventArgs e)
{
    var itemIndex = DropDownList1.SelectedIndex;
    var item = DropDownList1.Items[itemIndex];
    DropDownList1.Items.RemoveAt(itemIndex);
    DropDownList1.Items.Insert(0, new ListItem(item.Text, item.Value));
}

Source:

How to move selected value of drop down list to first position in the list of items by using C#.net