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

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,这是有效的.