Question

我在ASP.NET页面上有以下下拉列表：

<asp:DropDownList ID="selectAttending" runat="server">
              <asp:ListItem Value="Select One...">Select One...</asp:ListItem>
              <asp:ListItem Value="Yes">Yes</asp:ListItem>
              <asp:ListItem Value="No">No</asp:ListItem>
            </asp:DropDownList>

我还有以下脚本：

$(function (){
$("#selectAttending").change(function () { 
ToggleDropdown(); 
}); 
ToggleDropdown();  
}); 

function ToggleDropdown(){
if ($("#selectAttending").val() == "No") {
    $("#ifAttending").hide(); 
} 
else{
    $("#ifAttending").show(); 
 } 
};

我想展示的DIV标签是： #ifAttending

我是否需要在下拉列表中添加属性以显示/隐藏更改或代码是否错误？

Answer 1

问题是selectAttending是ASP代码隐藏页面中使用的控件ID，而不是html中dropdown元素的id。

您必须这样做以获取控件的客户端ID：

$(function (){
    $("#<%=selectAttending.ClientID%>").change(function () { 
        ToggleDropdown(); 
    }); 
    ToggleDropdown();  
}); 

function ToggleDropdown(){
    if ($("#<%=selectAttending.ClientID%>").val() == "No") {
        $("#ifAttending").hide(); 
    } 
    else{
        $("#ifAttending").show(); 
    } 
 };

Answer 2

您在.net中，因此jquery中的标识符不是#selectAttending 除非你使用clientidmode =“static”，否则你的标识符将在.net中 selectAttending.UniqueID

Answer 3

虽然您的代码应该可以运行，但您可以简化并尝试此代码。请注意，我使用的是jQuery toggle方法，该方法使用布尔参数来显示/隐藏元素。

$(function (){
   $("#selectAttending").change(function () { 
       $("#ifAttending").toggle(this.value == "Yes")
   })
   .change();//trigger the change event on page load
});

Answer 4

代码看起来很正确。我的猜测是，由于naming containers，客户端DropDownList的ID不完全是selectAttending。

您可以使用css类名，或使用以下语法获取ClientID：

$("#<%=selectAttending.ClientID%>")

在ASP.NET下拉列表值更改时显示/隐藏DIV

4 个答案: