jquery - 当下拉列表选定值更改时隐藏 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，这有效。