Change the UI of ListBox and DropDownList on the fly

[eliza64]

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.A ttributes.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

<input id="Button1" type="button" value="button" onclick="ToggleView();"/>


<script type="text/javascript">
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.
} 
</ script>

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:ListBox ID="ListBox1" runat="server" Rows="3" onmouseover="javascript:document.getElementById('ListBox1').size = 3;" 
onmouseout ="javascript:document.getElementById('ListBox1').size = 1">
< asp:ListItem>Option 1</asp:ListItem>
< asp:ListItem>Option 2</asp:ListItem>
< asp:ListItem>Option 3</asp:ListItem>
</ asp:ListBox>

Eliza

[Frinavale]

I'm not sure why you would like to change a ListBox to a DropDownList... usually at design time you know whether you want to display the items.


I've moved this article to the writers lounge because it feels very incomplete and I'm not sure why anyone would actually want to do this.

-Frinny