Question

我正在使用代码背后的.VB开发一个ASPX项目。目标是在页面加载时隐藏两个div。然后当用户点击＆＃34;否＆＃34;单选按钮它将显示它下面的隐藏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

如果您不必使用JavaScript，可以在RadioButtonList中制作OnClick事件

OnSelectedIndexChanged="yourBehindCodeFunction"

并添加runat =＆＃34; server＆＃34;和所有div的ID，然后在后面的代码中获取id并将其设置为false

HTML
div class="centerContainer ui-widget-content" style="width: 230px;" runat="server" ID="test">

Behind-Code
var list = sender as RadioButtonList;
if(list.SelectedValue.Equals("No"))
    test.Visible = false;

如果您使用的是JavaScript，则需要将所有控件设置为static以使用document.getElementById，或者您可以使用JQuery并通过

调用每个控件。

$('#<%= yourControlId.ClientID %>').hide()

Answer 2

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

如果您没有提及任何内容，那么您使用 ClientID＆＃39> 而不是直接使用ID

例如，如果您的ID为'pnlPickupNo'，那么您可以使用以下语法来表达客户ID：

<%# 'pnlPickupNo'.ClientID %>

希望这会有所帮助..

Answer 3

问题是：如何让div隐藏起来？这是一个工作项目。有人告诉我使用JavaScript来消除后面代码中回调的需要。

这是我提出的简单答案： JavaScript的：

function hideDiv() {
    document.getElementById("pnlPickupNo").style.display = 'none';
    document.getElementById("pnlDeliveryNo").style.display = 'none';
};

标记：

body tag  onload="hideDiv()"

正如您所看到的，它是一个简单的纯JavaScript解决方案。它工作，节省我的时间。谢谢大家的建议。

JavaScript使用asp RadioButtonList显示/隐藏div

3 个答案: