Javascript to Disable or Make a ListItem Non selectable ASP.Net DropDownList in C# VB.Net

Sometimes we need to disable or not clickable or not selectable ListItem of a DropDownList. In many cases we can just filter out those ListItems but in some cases we can not to maintain the information hierarchy. That’s why in this article I will explain How we can disable ListItems of DropDownList using Javascript based on Value and Text.

Related Article:
JQuery to Disable Single or Multiple ListItem of a DropDownList in Asp.Net C# VB.Net

To do the Example follow the below HTML code:

    <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem Text="January" Value="1"></asp:ListItem>
        <asp:ListItem Text="February" Value="2"></asp:ListItem>
        <asp:ListItem Text="March" Value="3"></asp:ListItem>
        <asp:ListItem Text="April" Value="4"></asp:ListItem>
        <asp:ListItem Text="May" Value="5"></asp:ListItem>
        <asp:ListItem Text="June" Value="6"></asp:ListItem>
        <asp:ListItem Text="July" Value="7"></asp:ListItem>
        <asp:ListItem Text="August" Value="8"></asp:ListItem>
        <asp:ListItem Text="September" Value="9"></asp:ListItem>
        <asp:ListItem Text="October" Value="10"></asp:ListItem>
        <asp:ListItem Text="November" Value="11"></asp:ListItem>
        <asp:ListItem Text="December" Value="12"></asp:ListItem>
    </asp:DropDownList>

Javascript code to Disable ListItem of a DropDownList based on Value:

    <script type="text/javascript">
        var myDropDownList = document.getElementById("<%=DropDownList1.ClientID %>");
        for (var i = 0; i < myDropDownList.length; i++) {
            if (myDropDownList.options[i].value == 3 || myDropDownList.options[i].value == 4 || myDropDownList.options[i].value == 5)
                myDropDownList.options[i].disabled = true;
        }
    </script>

Note: March, April & May ListItem will be disabled. Place the Javascript code at the bottom of the page.

Javascript code to Disable ListItem of a DropDownList based on Text:

    <script type="text/javascript">
        var myDropDownList = document.getElementById("<%=DropDownList1.ClientID %>");
        for (var i = 0; i < myDropDownList.length; i++) {
            if (myDropDownList.options[i].text == 'September' || myDropDownList.options[i].text == 'October' || myDropDownList.options[i].text == 'November')
                myDropDownList.options[i].disabled = true;
        }
    </script>

Note: September, October & November ListItem will be disabled. Place the Javascript code at the bottom of the page.

Output/Outcome:
Javascript to Disable Single or Multiple ListItem of a DropDownList in Asp.Net Csharp VB.Net

Hope now you can Disable or Make ASP.Net DropDownList ListItem Non selectable Using Javascript easily.

Download Code Example C#        Download Code Example VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code