скрытие и показ DIV с помощью Jquery

Question

Я использую C# для программирования, пожалуйста, смотрите ниже код:

<p><b> 
      <%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterest")%> 
     </b>&nbsp;<font color="red">*</font>&nbsp; 
     <br> 
     <asp:dropdownlist id="ddl_ProgramInterest" tabIndex="3" Runat="server"></asp:dropdownlist><br> 
     <asp:requiredfieldvalidator id="reqv_ddl_ProgramInterest" runat="server" Display="Dynamic" ControlToValidate="ddl_ProgramInterest"></asp:requiredfieldvalidator></p> 
    <div style="DISPLAY: none" id="divOther" runat="server"> 
     <p><b> 
       <%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestOther")%> 
      </b> 
      <br> 
      <asp:textbox id="txt_Other" tabIndex="6" Width="155" runat="server"></asp:textbox><br> 
      <asp:requiredfieldvalidator id="reqv_txt_Other" runat="server" Display="Dynamic" ControlToValidate="txt_Other"></asp:requiredfieldvalidator></p> 
    </div> 

Выше Вы можете видеть, что у меня есть выпадающий «Программа Interest» и выше выпадающего списка имеют два значения «Live 'и' Other ', я хочу, когда пользователь выбирает другое, тогда будет отображаться «divOther» или будет скрыто так же, как для requirefieldvalidator «reqv_txt_Other», я написал код ниже в codebehind, его работоспособность, но на стороне сервера.

private void ddl_ProgramInterest_SelectedIndexChanged(object sender, System.EventArgs e) 
     { 
      if (ddl_ProgramInterest.SelectedValue == ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestValue2")) 
      {   
       divOther.Style.Add("display","block"); 
       reqv_txt_Other.Enabled = true; 
      } 
      else 
      {   
       divOther.Style.Add("display","none"); 
       reqv_txt_Other.Enabled = false; 
       txt_Other.Text=""; 
      } 
     } 

Пожалуйста, предложите, как можно использовать JQuery!

Благодаря

Answer 1

Вы можете сделать это в JQuery, как это:

<script type="text/javascript"> 
    $(function() { 
    $("#<%=ddl_ProgramInterest.ClientID%>").change(function() { 
     var other = $(this).val() === '<%=ResourceFile.GetResourceString("c_FreeLiveOnlineProgramInterestValue2")%>'; 
     $("#divOther").toggle(other); 
     $("#<%=reqv_txt_Other.ClientID%>").attr("enabled", other);  
    }).change(); //fire it on load 
    }); 
</script> 

Просто снимите runat="server" из divOther, как это уже не нужно. Решение выше должно быть на вашей странице работать, иначе теги сервера не будут разрешаться (и строка ресурса должна быть на странице в любом случае).

Если вы хотите, чтобы найти элементы в (мнение здесь) чистого пути, дать им класс, например, дать выпадающий CssClass="interest" и изменить что селектор JQuery из $("#<%=ddl_ProgramInterest.ClientID%>") в $(".interest"), немного чище :)