JavaScript 显示/隐藏 div 使用 asp RadioButtonList

Question

我正在开发一个 ASPX 元素，其代码中包含 .VB。目标是在页面加载时隐藏两个 div。然后，当用户单击“否”单选按钮时，它将在其下方显示隐藏的 div。单选按钮是 asp 列表项。

下面的代码有效，但在页面加载时 div 是可见的。我假设它是我的 VB 代码或页面加载时未隐藏的 JS 代码。

这是后面的VB代码。

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
For Each li As ListItem In rbPickUpOnTime.Items
    If li.Value = "Y" Then
        li.Attributes.Add("onclick", "javascript:hidePickup();")
    End If
    If li.Value = "N" Then
        li.Attributes.Add("onclick", "javascript:showPickup();")
    End If
Next

For Each li As ListItem In rbDeliveryOnTime.Items
    If li.Value = "Y" Then
        li.Attributes.Add("onclick", "javascript:hideDelivery();")
    End If
    If li.Value = "N" Then
        li.Attributes.Add("onclick", "javascript:showDelivery();")
    End If
Next

这是 JavaScript:

function hidePickup() {
document.getElementById('pnlPickupNo').style.display = 'none';
};

function showPickup() {
document.getElementById('pnlPickupNo').style.display = 'block';
};

function hideDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'none';
};

function showDelivery() {
document.getElementById('pnlDeliveryNo').style.display = 'block';
};

最后这是它需要显示/隐藏的 ASPX 面板之一:

<div class="container" style="margin-top: 20px;">
<div class="centerContainer" style="width: 230px;">
<label class="Emphasis">I can pickup on time </label>
    <asp:RadioButtonList ID="rbPickUpOnTime" runat="server"
 RepeatDirection="Horizontal" 
 Style="margin-left: 60px;" TabIndex="2" AutoPostBack="false">
    <asp:ListItem Text="Yes" Value="Y" Selected="True" />
    <asp:ListItem Text="No" Value="N" />
    </asp:RadioButtonList>
</div>
  <asp:Panel ID="pnlPickupNo" runat="server" >
 <div class="centerContainer ui-widget-content" style="width: 230px;">
    <label>If No, ETA to pickup </label>
      <table style="margin-left: 15px;">
       .....
     </table>
</div>

有什么建议吗？

Answer 1

如果您使用的是 .Net 4.0 或更高版本，您可以使用客户端 ID 模式静态在服务器端生成相同的 ID。

如果您没有提及任何事情，那么您使用的是 ClientID's 而不是直接使用 ID

例如，如果您的 ID 是 'pnlPickupNo' ，那么您可以使用以下语法获取客户端 ID:

<%# 'pnlPickupNo'.ClientID %>

希望这有帮助..