Force asp.net dropdownlist to expand

Question

I have an ASP.NET data bound dropdownlist which is populated based on the contents of a textbox. After it is populated I would like to expand the dropdownlist automatically, so that the user realizes that a choice needs to be made and doesn't need to click on the dropdown to expand it. There doesn't seem to be a property or method do do this.

EDIT: After trying out Ed B's example, I am still stuck. The id of my ddl is 'ctl00_ContentPlaceHolder9_ddlContact'. If I put the following in the onclick event of a button, it works fine, the dropdown expands nicely:

    document.getElementById('ctl00_ContentPlaceHolder9_ddlContact').size=10;

However, the following code in the Databound event of the ddl shows the alert but doesn't expand the dropdown:

string script = "<SCRIPT LANGUAGE='JavaScript'> ";
    script += "alert('expanding');document.getElementById('ctl00_ContentPlaceHolder9_ddlContact').size=10 </SCRIPT>";
    ClientScript.RegisterClientScriptBlock(GetType(), "Dropdown", script);

possible duplicate of [Is it possible to use JS to open an HTML select to show it's option list?](http://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — Matti Virkkunen, Aug 27 '10 at 20:07
To programmatically get the client-side id of the DropDownList - ctl00_ContentPlaceHolder9_ddlContact, in this case - from server-side code, use the ClientID property, like so - ddlContact.ClientID — Scott Mitchell, Aug 27 '10 at 21:35

score 2 · Answer 1 · edited May 23 '17 at 12:30

Summary: You can't expand a vanilla drop-down list. See this discussion for more information: Can I open a dropdownlist using jQuery. However, there are some workarounds that may be acceptable.

One approach (albeit a bit cheeky) is to have the drop-down list expand to show more items at once. By default, a element shows just one list item at a time, but you can use its size attribute to have it show more than one at a time. With this approach you could adjust the size attribute when the user mouses over the DDL (to simulate expanding it) and then revert back to a size of 1 when they mouse off (to return it to a "normal" DDL). Here is an example:

<asp:DropDownList runat="server" ID="ddlColors" 
                  onmouseover="this.size=3;" 
                  onmouseout="this.size=1">
    <asp:ListItem>Red</asp:ListItem>
    <asp:ListItem>Green</asp:ListItem>
    <asp:ListItem>Blue</asp:ListItem>
</asp:DropDownList>

Another option is to use JavaScript to create a pseudo-select. In short, you use a combination of script and DOM manipulation and CSS to get a user interface that meets your requirements.

Happy Programming!

I need to expand the list after it's databound, not on a mouse over event. How does the .Attributes property work for this? — dsteele, Aug 27 '10 at 21:39

score 0 · Answer 2 · answered Aug 27 '10 at 20:11

You can change the size of the dropdownlist once it's been changed. After an option is selected, the size can be changed back down to 1.

This code changes the size on mouseover, but you change it to call open_ddl after the server side bind.

<script language="javascript">    
function open_ddl()
    {
    document.getElementById("select1").size=5
    }

    function close_ddl()
    {
    document.getElementBById("select1").size=1
    }

    </script>

    Worst President Ever:
    <select id="Select2" runat="SERVER" onmouseover="open_ddl()" onmouseout="close_ddl()">
                     <option value="0" >Obama</option>
                     <option value="1" >Carter</option>
                     <option value="2" >Nixon</option>
                     <option value="3" >Clinton</option>
    </select>

I recommend changing the answer to remove the politics. Not relevant to StackOverflow. — Anthony Pegram, Aug 27 '10 at 20:19
Voting me down cause of the values in the dropdown,instead of the answer...typical liberals — Ed B, Aug 28 '10 at 00:07

score 0 · Answer 3 · edited Feb 13 '12 at 14:13

You need to add the attribute multiple to your select list.

So do this is your javascript code that you need to append to your script variable on DataBound. (Provided you are using jQuery)

script+=$("#ctl00_ContentPlaceHolder9_ddlContact").attr("multiple", "multiple");

Or Instead you can take out javascript and just add the multiple attribute straight in the markup. So do this :

DropDownList1.Attributes.Add("multiple","multiple");

Force asp.net dropdownlist to expand

3 Answers3

Linked