Question

我有一个下拉列表，当所选值更改时，我想要隐藏div。（还有另一个控件使div可见）。

我目前有以下内容，但是当我在下拉列表中更改所选值时，div不会隐藏。

<script type="text/javascript">
$(document).ready(function () {

    $('#MyDd').change(function () {
        $('#buttonDiv').hide();            
    });
});

</script>

<asp:DropDownList ID="MyDd" runat="server" /> 
<div id="buttonDiv" class="buttonContainer">
    <asp:Button ID="myButton" runat="server" /> 
</div>

为什么这不起作用的任何想法？

提前感谢您的帮助。

Answer 1

呈现页面时，Asp.net的服务器端控件的ID会发生变化。所以“MyDd”将不再是下拉列表的ID。你必须通过代码注册javascript变量。尝试将下拉列表的客户端ID保存在本地变量中并注册脚本。

您可以为下拉列表指定一个类，然后使用该类为该元素指定一个事件。

<asp:DropDownList ID="DropDownList1" runat="server" class="cls">
   <asp:ListItem Text="One" Value="1" />
   <asp:ListItem Text="Two" Value="2" />
</asp:DropDownList>

<script type="text/javascript">
 $().ready(function () {
     $('.cls').change(function () {
         alert('hi');
     });
 });
 </script>

我在这里使用了jquery，这很有效。

Answer 2

我猜你已经明白你需要使用：

<script type="text/javascript">
$(document).ready(function () {

    $('#<%=MyDd.ClientID%>').change(function () {
        $('#buttonDiv').hide();            
    });
});

</script>

<asp:DropDownList ID="MyDd" runat="server" /> 
<div id="buttonDiv" class="buttonContainer">
    <asp:Button ID="myButton" runat="server" /> 
</div>

当下拉选择值更改时隐藏div

2 个答案: