使用JQuery來顯示/隱藏控件取決於下拉列表選定的值

我想使用JQuery顯示/隱藏基於選擇的下拉菜單的索引的div標籤，但它不工作。任何幫助將不勝感激。使用JQuery來顯示/隱藏控件取決於下拉列表選定的值

謝謝。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="drop_down_test.WebForm1" %>

<form runat="server" ID="frmReport"> 
    <asp:DropDownList ID="ddlReports" OnChange="ShowHide()" AutoPostBack="true" runat="server" 
     onselectedindexchanged="ddlReports_SelectedIndexChanged"> 
     <asp:ListItem Text="Please Select Report" Value="Default" /> 
     <asp:ListItem Text="Report 1" Value="ReportValue1" /> 
     <asp:ListItem Text="Report 2" Value="ReportValue2" /> 
    </asp:DropDownList> 
    <br /> 
    <br /> 
    <div id="Report1Section"> 
     <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" /> 
    </div> 
    <br /> 
    <div id="Report2Section"> 
     <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" /> 
    </div> 
</form> 

<script language="JavaScript" type="text/javascript" src="~/Scripts/jquery-1.4.1.js"></script> 

<script type="text/javascript"> 
    function ShowHide() { 
     var ddlSelectedIndex = ('#<%= ddlReportName.ClientID %>').get(0).selectedIndex; 

     switch (ddlSelectedIndex) { 
      case 1: 
       $('#Report1Section').show('slow'); 
       $('#Report2Section').hide('fast'); 
       break; 
      case 2: 
       $('#Report1Section').hide('fast'); 
       $('#Report2Section').show('slow'); 
       break; 
     } 
    } 
</script>

來源

2011-01-29 BigBadDom

使用類，如@Victor說。 ASP.Net版本< 4將與ID混淆。

利用可以將多個類應用於HTML元素的事實。這可以讓你分組的東西。例如。所有你可隱藏的報道。

<div id="Report2Section" class="Report2 reportDiv"> 
     <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" /> 
    </div>

然後使用列表項的值的名稱（空格刪除）來獲取您需要顯示的div的id。您可以在頁面的ready(...)事件中將事件連接到la JQuery。

<asp:DropDownList ID="ddlReports ~~OnChange="ShowHide()"~~ runat="server" ~~Autopostback='true'~~
_{[取自動回過類似@SeanTaylor的下拉列表說 - 你想改變火JavaScript代碼而不是ASP.Net回發到服務器的機制。]}

~~onselectedindexchanged="ddlReports_SelectedIndexChanged"~~
_{[電線您的活動了NU-斯庫爾，JQuery的方式（見下文）}
>

<asp:ListItem Text="Report 1" Value="Report1_{[刪除在Value]}/>空間

然後，您可以調用了slideDown上的所有reportdivs爲一組，調用效果基本show你通過其ID需要從下拉列表中的人之前：

$(document).ready(function(){//there is a more modern way of writing this line. 
    $('.ddlReports').change(function(){//JQuery style of wiring events up 
      $('.reportDiv').slideUp();//takes care of whichever one is showing (if any). 
      $('#' + $(this).val() + "Section").slideDown(); 
    }); 
});

來源

2011-01-30 01:08:51 5arx

該方法非常有效。在你的評論中，你已經說過「有一種更現代的寫這一行的方式」：你是指$（function（）{？ – BigBadDom 2011-01-30 11:29:29

回抽我以前的答案，因爲我沒有正確讀取源代碼。

我注意到你在下拉菜單中設置了autopostback =「true」，這會觸發jquery，但是頁面將重新加載，並且divs的可視性不會改變。

刪除autopostback，它應該工作。

div的ID是應該保持一致，那麼你命名他們，因爲他們沒有RUNAT =「服務器」

來源

2011-01-29 20:35:33

或最好在這種情況下，將用於選擇一類名。如果您的代碼結構因爲任何原因而發生變化，那麼ASP.NET生成的ID和您的JavaScript將會中斷。 – Victor 2011-01-29 20:39:33

的元素的ID都不同渲染比你已經宣佈，由於主頁。我建議你使用div的類名作爲選擇器。你可以猜測和硬編碼div的預期ID，但是如果你的代碼結構發生了變化，那麼生成的ID也會被使用。

試試這個：

<div id="Report1Section" class="Report1"> 
     <asp:Label ID="lblReport1" Text="This is for Report 1" runat="server" /> 
    </div> 
    <br /> 
    <div id="Report2Section" class="Report2"> 
     <asp:Label ID="lblReport2" Text="This is for Report 2" runat="server" /> 
    </div>

然後：

$('.Report1').show('slow');

，或者您可以使用服務器腳本動態獲取ID：

$('<%= Report1Section.ClientID %>').show('slow');

來源

2011-01-29 20:42:20 Victor

使用JQuery來顯示/隱藏控件取決於下拉列表選定的值

回答

相關問題