Change TextBox Style when DropdownList value Change in ASP.NET using jQuery

In this tips I am going to show how you can change all Text Boxes style based on the Dropdownlist Value using jQuery. There are multiple ways to do that. Let’s consider we have two different textbox with and a dropdown list with 3 different value and on selection change of dropdown list we will be changing the value of textbox.

Below is the code snippet for the same

  <script type="text/javascript">

        $(document).ready(function () {
         // dropdownlist selection change
            $('#ddllist').change(function () {
    // get value of the selected item     
           var dropdownvalue = $('#ddllist').val();

   // Apply Style CSS . Here instead of JSON you can use    $(":text").Addclass() as well
                if (dropdownvalue == "Red") {
                    $(":text").css(
                       { background: "#FDC2AA",
                           border: "1px #6E6E6E solid" 
                       });
               
                   }

                else if (dropdownvalue == "Green") {
                    $(":text").css({
                                     background: "#99FFCC;",
                                     border: "1px #6E6E6E solid" });
                }
                else if (dropdownvalue == "Blue") {
                    $(":text").css({ 
                                        background: "#939DF9;",
                                        border: "1px #6E6E6E solid" });
                }
                else {
                    $(":text").css({  
                                        background: "#ffffff;",
                                        border: "1px #6E6E6E solid" });
                }
            });

        });

    
    </script>

Let me explain the little bit of the code snippet. First thing I would like to highlight the Change event and getting value from Dropdown list.

var dropdownvalue will hold the value of selected item on change of the dropdown list. After that process is very my simple, you can find all the text box ( though its based on requirements or you can select the required textbox) and apply the CSS.

Here I have used JSON to apply the css for all the input type=”text”. Instead of css, you can control it using class ($(“:text”).Class() as well.

Below is the complete code snippet.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RequiredjQuery.aspx.cs" Inherits="RequiredjQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <style type="text/css">
        .textboxClass
        {
            border: 1px;
            border-color: #6E6E6E;
            border-style: solid;
            background-color: #ffffff;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#ddllist').change(function () {
                var dropdownvalue = $('#ddllist').val();

                if (dropdownvalue == "Red") {
                    $(":text").css(
                       { background: "#FDC2AA",
                           border: "1px #6E6E6E solid" 
                       });
               
                   }

                else if (dropdownvalue == "Green") {
                    $(":text").css({ background: "#99FFCC;", border: "1px #6E6E6E solid" });
                }
                else if (dropdownvalue == "Blue") {
                    $(":text").css({ background: "#939DF9;", border: "1px #6E6E6E solid" });
                }
                else {
                    $(":text").css({ background: "#ffffff;", border: "1px #6E6E6E solid" });
                }
            });

        });

    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="2" cellspacing="2">
            <tr>
                <td colspan="3" align="right">
                    <div>
                        <asp:DropDownList runat="server" ID="ddllist">
                            <asp:ListItem Text="None" Value="None" />
                            <asp:ListItem Value="Red" Text="Red" />
                            <asp:ListItem Value="Green" Text="Green" />
                            <asp:ListItem Value="Blue" Text="Blue" />
                        </asp:DropDownList>
                    </div>
                </td>
            </tr>
            <tr id="row1">
                <td>
                    Field 1
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" ID="textField1" runat="server" />
                </td>
            </tr>
            <tr id="row2">
                <td>
                    Field 2
                </td>
                <td>
                    <asp:TextBox CssClass="textboxClass" ID="textField2" runat="server" />
                </td>
                <td>
                </td>
            </tr>
            <tr>
           
            </tr>
        </table>
    </div>
    </form>
</body>
</html>