Question

这是我的代码：

    function displayPanel(ddl) {
    var value = ddl.options[ddl.selectedIndex].Text;
    var value2 = ddl.options[ddl.selectedIndex].Text;
    if (value = "News") {
        document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "block";
        document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "none";
    }
    else if (value2 = "Review") {
        document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "block";
        document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "none";
    }
};

    <table>
        <tr>
            <td>
               Article Type
            </td>
            <td>
           <asp:DropDownList ID="ddlNewsCategory" runat="server" onchange="displayPanel(this)">
               <asp:ListItem Text="Select" />
               <asp:ListItem Text="News" />
               <asp:ListItem Text="Review" />
           </asp:DropDownList> 
            </td>
        </tr>   
    </table>
    <asp:Panel ID="pnlCreateNews" style="display:none;" runat="server">
       (Content Here)
</asp:Panel>

    <asp:Panel ID="pnlCreateReview" style="display:none;" runat="server">
     (Content Here)
</asp:Panel>
</asp:Content>

中途工作。我从下拉菜单中选择“新闻”并显示“新闻”面板，但是如果我尝试选择“审核”，则“审核”面板将保持隐藏状态。

修改代码后，我可以在选择“Review”时弹出Review面板。但是，在选择“新闻”时，“新闻”面板仍然隐藏。

我非常接近这一点，但我不知道还能做什么。看起来不对，但我很可能错过了一些东西。

Answer 1

首先，您需要为if语句使用double equal。尝试

 if (value == "News") {
    document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "block";
    document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "none";
}
else if (value2 == "Review") {
    document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "block";
    document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "none";
}

此外，您可以使用jquery id selector $（＆＃34;＃id＆＃34;）

更新您的getElementById

您还可以使用$（＆＃34;＃id＆＃34;）显示/隐藏项目.show（）和$（＆＃34;＃id＆＃34;）。hide（）见jquery doc

更新1：

您需要将＆id替换为＆lt;％= pnlCreateNews.ClientID％＆gt;或＆lt;％= pnlCreateReview.ClientID％＆gt; 试试这个：

  function displayPanel(ddl) {
    var value = ddl.options[ddl.selectedIndex].Text;
    if (value == "News") {
        document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "block";
        document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "none";
    }
    else if (value == "Review") {
        document.getElementById("<%=pnlCreateReview.ClientID %>").style.display = "block";
        document.getElementById("<%=pnlCreateNews.ClientID %>").style.display = "none";
    }
};

Answer 2

使用===进行比较而不是=然后使用jquery $（＆＃39; #panelCreateNews）.show（）;或$（＆＃39; #panelCreateNews）.hide（）;

Answer 3

试试这个：

 if (value == "News") {
    $(#"[insertElementIDHere]").toggle();
    $(#"[insertSecondElementIDHere]").toggle();
}

http://api.jquery.com/toggle/

如何使用jquery显示/隐藏两个单独的面板？

3 个答案: