このjquery検証コードで何が問題になっていますか？

Question

コードは、ページが読み込まれたときにテキストボックスを非表示にし、ユーザーが[その他]を選択したときにのみ表示されるようになっています。

<script type="text/javascript"> 
     $(document).ready(function() { 
     $('#ddlMajor').change(function() { 
     if ($(this).val() == 'Other') { 
       //    $('#txtOther').show(); 
     $('#txtOther').css('display', 'inline'); 
     } 
     else { 
       //    $('#txtOther').hide(); 
     $('#txtOther').css('display', 'block'); 
     } 

     }); 

}); 
</script> 

<asp:TextBox runat="server" ID="txtOther" style="display:none;" > </asp:TextBox> 

<asp:DropDownList runat="server" ID="ddlMajor"> 
       <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
       <asp:ListItem Value="Management">Management</asp:ListItem> 
       <asp:ListItem Value="Other">Other</asp:ListItem> 
</asp:DropDownList> 

Answer 1

サーバーサイドコントロールを使用している場合、IDは再レンダリングされます。あなたは、あなたのjavascriptのコードブロックを置くこともできますが、私の代わりにクラスを使用することをお勧めします：

<asp:TextBox runat="server" ID="txtOther" style="display:none;" CssClass="txtOther"> </asp:TextBox> 

<asp:DropDownList runat="server" ID="ddlMajor" CssClass="ddlMajor"> 
       <asp:ListItem Value="Accounting">Accounting</asp:ListItem> 
       <asp:ListItem Value="Management">Management</asp:ListItem> 
       <asp:ListItem Value="Other">Other</asp:ListItem> 
</asp:DropDownList> 

$('.ddlMajor').change(function() { 
... 
}); 

私はまた、あなたのCSS display値が間違っていると信じています。

$(document).ready(function() { 
     $('.ddlMajor').change(function() { 
     if ($(this).val() == 'Other') { 
     $('.txtOther').css('display', 'block'); 
     } 
     else { 
     $('.txtOther').css('display', 'none'); 
     } 

     }); 

---

をそれとも、マークアップを変更したくない場合は、ClientIDを使用します。これを試してみてください。注意：youveは

$(document).ready(function() { 
     $('#<%= ddlMajor.ClientID %>').change(function() { 
     if ($(this).val() == 'Other') { 
     $('#<%= txtOther.ClientID %>').css('display', 'block'); 
     } 
     else { 
     $('#<%= txtOther.ClientID %>').css('display', 'none'); 
     } 

     }); 

Answer 2

あなたの問題は、あなたがテキストボックスを非表示にしようとするとき、あなたはblockにその表示を設定することであるの.aspxファイル内に含まれるJavaScriptを得た場合にのみ動作します。 JQueryは表示プロパティーdisplay: noneを使用してテキストボックスを非表示にします。だから、あなたがやっているのはjQueryの隠蔽です。これを試してみてください：

$(document).ready(function() { 
    $('#ddlMajor').change(function() { 
     $('#txtOther').css('display', 'inline'); 
     if ($(this).val() == 'Other') { 
      $('#txtOther').show(); 
     } else { 
      $('#txtOther').hide(); 
     } 
    }); 
}); 

Answer 3

あなたが参照としてクラスを使用する必要はありませんが、レンダリング時にサーバーコントロールが別のIDを持つことになりますと、あなたが取得する代わりに、（<% = ddlMajor.ClientID％>）インラインを使用することができます適切なID：たとえば

：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#<%= ddlMajor.ClientID %>").change(function() { 
     if ($(this).val() == 'Other') { 
       $('#<%= txtOther.ClientID %>').show(); 

     } 
     else { 
       $('#<%= txtOther.ClientID %>').hide(); 

     } 

     }); 

    });