在回发后使用jquery选择下拉列表时显示/隐藏TextBox [英] Show/Hide TextBox when dropdown selected using jquery not working after postback

问题描述

我有一个下拉选择（选项1，选项2和选项3），当我选择其中一个选项时，我想要一个div显示并隐藏该选项。

i有我的jquery函数源代码，但回发后它不起作用。



我的代码

< script type =   text / javascript> 
 
 
 $（ document ）。ready（ function （） {
 
 $（' 。ddlFilter'）。change（ function （）{
  var  sel = $（ this ）。val（）; 
 $（'  #div_date'）。hide （）; 
 $（' ＃div_subject'）。hide（）; 
 $（' ＃div_status'）。hide（）; 
 
 < span class =code-keyword> if （sel === '  Date' ）{
 $（'  #div_date'）。show（）; 
 } 
  else   if （sel == ' < span class =code-string> Subject'）{
 $（' ＃div_subject 。）表示（）; 
} 
 其他 如果（sel == ' 状态'）{
 $（' ＃div_status' ）表示（）; 
} 
}）; 
 
}）; 
 
< / script> 

< asp：UpdatePanel ID =   UpdatePanel1 runat =  服务器 >  
< ContentTemplate> 
 
< div id =  选择 >  
筛选结果：
 
< asp：DropDownList CssClass =   ddlFilter ID =   ddlFilterResultBy 
 runat =   server宽度=   221px >  
< asp：ListItem Text =  选择...值=   >  < /   asp：ListItem  >  
 < asp：ListItem Text =  日期值=   日期 >  < /   asp：ListItem  >  
< asp：ListItem Text =  主题值=  主题 >  < /   asp：ListItem  >  
< asp：ListItem Text =   状态值=  状态 >  < /   asp：ListItem  >  
 < /   asp：DropDownList  >  
 
 < /   div  >  
< div id =   holder >  
< div id =   div_date style =    width：250px; display：none;  class  =   sectionrowDate >  
日期范围：
 
<％ - < uc1：DatePicker ID = < span class =code-string>  dpFromDate runat =   server /> 
< uc1：DatePicker ID =   dpToDate runat =   server />  -  ％>  
 < /   div  < span class =code-keyword>>  
< div id =   div_subject  style =   display：none;  class  =   sectionrow >  
主题：
< asp：TextBox ID =   txtSubject runat =   server Width =   225px SkinID =   Picker >   < /   asp：TextBox  >  
 < /   div  >  
 
 < div id =   div_status style =   display：none;  class  =   sectionrow >  
状态：
 
< asp：DropDownList ID =   ddlStatus runat =   server Width =   152px >  
 < /   asp：DropDownList  >  
 
 < /   div  >  
 < /   div  >  
 
< asp：按钮ID =   btnSearch Text =  搜索 runat = < span class =code-string>  server OnClick =   btnSearch_Click /> 
 < /   div  >  
 < /   ContentTemplate  >  
 < /   asp：UpdatePanel  >  

这个功能第一次运行得非常好，但在回发后它不起作用。





如何实现？

解决方案

（ document ）。ready（ function （）{

（' .ddlFilter'）。change（ function （）{
var sel =

（ this ）。val（）;

I have a dropdown select (option 1, option 2 and option 3), when i select one of the options i would like a div show and hide that option.
i have jquery function in my source code but after postback it not work.

my code

<script type="text/javascript">


    $(document).ready(function () {

        $('.ddlFilter').change(function () {
            var sel = $(this).val();
            $('#div_date').hide();
            $('#div_subject').hide();
            $('#div_status').hide();

            if (sel === 'Date') {
                $('#div_date').show();
            }
            else if (sel == 'Subject') {
                $('#div_subject').show();
            }
            else if (sel == 'Status') {
                $('#div_status').show();
            }
        });

    }); 

    </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>   

 <div id="select">
            Filter Results by:

            <asp:DropDownList CssClass="ddlFilter"   ID="ddlFilterResultBy" 
                        runat="server" Width="221px"> 
                <asp:ListItem Text="Select..." Value=""></asp:ListItem> 
                <asp:ListItem Text="Date" Value="Date"></asp:ListItem> 
                <asp:ListItem Text="Subject" Value="Subject"></asp:ListItem> 
                <asp:ListItem Text="Status" Value="Status"></asp:ListItem> 
            </asp:DropDownList> 

            </div>
            <div id="holder">
            <div id="div_date" style="width: 250px; display: none;" class="sectionrowDate">
                Date Range:

               <%-- <uc1:DatePicker ID="dpFromDate"  runat="server"   />
                <uc1:DatePicker ID="dpToDate"  runat="server"  />--%>
            </div>
            <div id="div_subject" style="display: none;" class="sectionrow">
                Subject: 
                <asp:TextBox ID="txtSubject" runat="server" Width="225px" SkinID="Picker"></asp:TextBox>
            </div>

            <div id="div_status" style="display: none;" class="sectionrow">
                Status:

                <asp:DropDownList  ID="ddlStatus" runat="server" Width="152px">
                </asp:DropDownList>

            </div> 
            </div>

            <asp:Button ID="btnSearch" Text="Search" runat="server" OnClick="btnSearch_Click" />
        </div>
         </ContentTemplate>
    </asp:UpdatePanel>

very first time this function work very well but after postback it not work.


How can this be accomplished?

解决方案

(document).ready(function () {

('.ddlFilter').change(function () { var sel =

(this).val();

这篇关于在回发后使用jquery选择下拉列表时显示/隐藏TextBox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！