Change the UI of ListBox and DropDownList on the fly

The ListBox and DropDownList both are very useful for their own advantages. Their differences lie in their User Interfaces, DropDownList take less space but need more clicks to access while ListBox takes more space but provides everything itself on the page.

You can easily change the UI of a ListBox to DropdownList and vice versa. It may be useful to save the page height. It can be done in two ways.
Suppose  the following code represents your ListBox & DropdownList

—————————————————————

< asp:ListItem>Option 1
< asp:ListItem>Option 2
< asp:ListItem>Option 3


< asp:DropDownList ID="DropDownList1" runat="server">
< asp:ListItem>Option 1
< asp:ListItem>Option 2
< asp:ListItem>Option 3

1. From ServerSide (In c#)

To change ListBox to DropDownList just change the Rows property of the ListBox with “1” Then it will behave as the Dropdown list in UI.
→ ListBox1.Rows = 1;

For the reverse Add
→ DropDownList1.Attributes.Add(“size”, “3”);

2. In ClientSide (By Javascript)
DropDownList & Listbox Both rendered as select in the browser differentiate in their size property. So to change the UI of DropDownList to ListBox just change this property

function ToggleView()
{
     document.getElementById('ListBox1').size = 1; // This will Change from listBox to Dropdown List.
     document.getElementById('DropDownList1').size = 3;// This will Change from Dropdown List to listBox.
}

A small may be useful idea can be:  Save the page space by showing the options  in a DropDownList & on mousover change it to listbox & again on mouseout do the reverse.
Here is the sample code

< asp:ListItem>Option 1
< asp:ListItem>Option 2
< asp:ListItem>Option 3