How to make DropDownList first item not selectable in asp.net

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.

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>

More asp.net examples