asp.net dropdownlist first item not selectable
The following asp.net c# example code demonstrate us how can we make the DropDownList first item
to non-selectable. Many web developers wants to put something instructional message on DropDownList
first item as like 'Select one item'. So in that situation, the first item is not a valid content to
allow user to select as a list item. In that case, we should disable the first item in DropDownList.
By default, DropDownList control have no built in property or method to disable its specific item. A disabled list item appear as dimmed and visible in web browser. So users can read the disable item text but they cannot select the disable item.
We can simply disable a specific item from DropDownList by using CSS style. CSS style 'disabled' property allow us to disable a list item. We can attach the CSS 'disabled' property with value to the specified list item object by using ListItem object's Attributes.Add() method. The bottom images will clearly explain you the example.
By default, DropDownList control have no built in property or method to disable its specific item. A disabled list item appear as dimmed and visible in web browser. So users can read the disable item text but they cannot select the disable item.
We can simply disable a specific item from DropDownList by using CSS style. CSS style 'disabled' property allow us to disable a list item. We can attach the CSS 'disabled' property with value to the specified list item object by using ListItem object's Attributes.Add() method. The bottom images will clearly explain you the example.
dropdownlist-first-item-not-selectable.aspx
<%@ Page Language="C#" AutoEventWireup="true"%>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
string[] birds = {
"Select a bird...",
"Hill Partridge",
"Satyr Tragopan",
"Himalayan Monal",
"Great Argus",
"Red Junglefowl"
};
DropDownList1.DataSource = birds;
DropDownList1.DataBind();
}
DropDownList1.Items[0].Attributes.Add("disabled", "disabled");
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Label1.Text = "you selected....<br />";
Label1.Text += DropDownList1.SelectedItem.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>asp.net dropdownlist first item not selectable</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:MidnightBlue; font-style:italic;">
asp.net example - dropdownlist first item not selectable
</h2>
<hr width="550" align="left" color="Gainsboro" />
<asp:Label
ID="Label1"
runat="server"
Text="select an item from dropdownlist."
Font-Size="X-Large"
Width="350"
>
</asp:Label>
<br /><br />
<asp:DropDownList
ID="DropDownList1"
runat="server"
AutoPostBack="true"
Width="350"
Font-Size="X-Large"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
>
</asp:DropDownList>
</div>
</form>
</body>
</html>

- How to display tooltip for DropDownList each items
- How to change DropDownList item background color
- How to highlight an item in a DropDownList
- How to create a rounded corners DropDownList
- How to change DropDownList selected item text and background color
- How to remove arraow from DropDownList
- How to change DropDownList arrow image
- How to select DropDownList item by value
- How to select DropDownList item by item text
- How to create a DropDownList displaying years