使用JQuery显示/隐藏控件，具体取决于下拉列表选择的值

我正在尝试使用JQuery根据下拉菜单中选定的索引显示/隐藏div标签，但它无法正常工作。 任何帮助将不胜感激。

谢谢。

 
      
 
 
  
 
 
  
 
   function ShowHide() { var ddlSelectedIndex = ('#').get(0).selectedIndex; switch (ddlSelectedIndex) { case 1: $('#Report1Section').show('slow'); $('#Report2Section').hide('fast'); break; case 2: $('#Report1Section').hide('fast'); $('#Report2Section').show('slow'); break; } }  

Answer 1

使用像@Victor这样的类说。 ASP.Net版本<4将弄乱ID。

利用可以将多个类应用于HTML元素的事实。 这允许您分组内容。 例如，所有可隐藏的reportdivs。

然后使用列表项的值中的名称（已删除的空格）来获取您需要显示的div的ID。 您可以在页面的ready(...)事件中将事件连接到JQuery。

runat="server" Autopostback='true'
[像@SeanTaylor那样从下拉列表中取出自动回复 - 你想要改变你的javascript代码而不是ASP.Net回发到服务器机制。]

onselectedindexchanged="ddlReports_SelectedIndexChanged"
_{[通过nu-skool，JQuery方式（见下文）]将您的事件连接起来]}
>

Answer 2

由于母版页，元素的ID呈现方式与您声明的元素不同。 我建议您使用div的类名作为选择器。 您可以猜测并硬编码div的预期ID，但如果您的代码结构发生变化，那么生成的ID也会如此。

试试这个：

然后：

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

或者您可以使用服务器脚本动态获取ID：

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

Answer 3

撤回我之前的答案，因为我没有正确阅读您的源代码。

我注意到你在下拉列表中设置了autopostback =“true”，这将触发jquery，但随后页面将重新加载并且div的可见性不会改变。

删除autopostback它应该工作。

div的ID应该与你命名的ID保持一致，因为它们没有runat =“server”