show and hide text box based on dropdownlist value inside gridview data and footerrow

See more:

Javascript

Hi All,

I am trying to show or hide textbox based on drop down list selected value.

When selected value will be "Other" then textbox will be visible.

Here is my javascript code:

$("#gridhvac input[name$='ddlhvacmake_rev']").change(function () {
           if (this.value == "Other") {
               $("#gridhvac input[name$='txtother_rev']").attr("style","display: block;");
           }
           else {
               $("#gridhvac input[name$='txtother_rev']").attr("style", "display: none;");
           }
       });

and here is aspx code:

<asp:TemplateField HeaderText="MAKE">
        <EditItemTemplate>
        <asp:DropDownList ID="ddlhvacmake" runat="server">
        <asp:ListItem>1</asp:ListItem>
        <asp:ListItem>2</asp:ListItem>
        <asp:ListItem>3</asp:ListItem>
        <asp:ListItem>4</asp:ListItem>
        <asp:ListItem>Other</asp:ListItem>
        </asp:DropDownList>
<br />
        <asp:TextBox runat="server" ID="txtother" Style="display: none;"/>
        
        </EditItemTemplate>
        <ItemTemplate>
        <asp:Label ID="lblhvacmake" runat="server" Text='<%#Eval("MAKE") %>'/>
        </ItemTemplate>
     <FooterTemplate>
                <asp:DropDownList ID="ddlhvacmake_rev" runat="server">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
                <asp:ListItem>4</asp:ListItem>
                <asp:ListItem>Other</asp:ListItem>
                </asp:DropDownList>
                <br />
                <asp:TextBox runat="server" ID="txtother_rev" Style="display: none;"/>
            </FooterTemplate>
        
        </asp:TemplateField>

I cannot figure out what's wrong in this code. This does not work and there is no error also.