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);

Answer 1

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>

Answer 2

Summary: You can't expand a vanilla drop-down list. See this discussion for more information: http://stackoverflow.com/questions/360431/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!

Answer 3

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");