无法隐藏 <span> 文本</span>

Question

aspx 页面

<asp:UpdatePanel ID="asypnl" runat="server">
   <ContentTemplate>
      <asp:Wizard />
      <StartNavigationTemplate>
      </StartNavigationTemplate>
      <FinishNavigationTemplate>
      </FinishNavigationTemplate>
      <WizardSteps>
         <asp:WizardStep ID="WizardStep1" runat="server">
            <asp:Panel runat="server" ID="pnlGiftInfo">
               <td>
                  <asp:DropDownList ID="DropDownPayment" runat="server">
                     <asp:ListItem Selected="True" Value="0">Gift</asp:ListItem>
                     <asp:ListItem Value="1">Pledge</asp:ListItem>
                  </asp:DropDownList>
               </td>
            </asp:Panel>
         </asp:WizardStep>
      </WizardSteps>
      <asp:Panel runat="server" ID="pnlOutput">
         <%-- Content comes from the database OutputHtml Colunm--%>
      </asp:Panel>
   </ContentTemplate>
</asp:UpdatePanel>

数据库列

<p>Thank you for your <span id "ddlGift">gift</span><span id "ddlPayment">payment</span> of
    {Amount} to the {Comm}
<script type="text/javascript" language="javascript">
        var p = document.getElementById("DropDownPayment");
        var eledropdownPayment = p.options[p.selectedIndex].value;
        var ddlGift = document.getElementById("ddlGift");
        var ddlPayment = document.getElementById("ddlPayment");
        if (eledropdownPayment == "0") {
            ddlGift.style.display = "block";
            ddlPayment.style.display = "none";
        } else {
            ddlGift.style.display = "none";
            ddlPayment.style.display = "block";
        }
</script>

在向导 ctrl 中提交最后一步后，我将使用数据库中构建的 Html 标记结构来显示结果。一切正常，除了数据库中的脚本没有执行，所以我可以看到两个跨度文本。 我只想根据下拉选择选择跨度。 我无法在 aspx 中编写脚本，因为这些跨度标记在页面加载事件中不存在，它们在完成向导 ctrl 中的 2 个步骤后进入输出面板。 我需要一些方法来根据下拉选择显示 sapn... 谢谢。抱歉，描述太长了。

Answer 1

与其从 db 中获取包含 span 标签的全文，最简单的解决方案是将两个 span id 放在设计时。从 db 中提取其他文本以及数量和其他详细信息并将其放置在适当的位置。

在设计时放置 谢谢你的礼物支付

来自分贝， {Amount} 到 {Comm}

现在您可以在 javascript 中控制 span 并相应地使 span 可见/不可见。

Answer 2

如果我理解正确，您的 html+javascript 通过 ajax 来自数据库，在这种情况下，您可能需要稍微延迟 javascript 的执行，以便让浏览器有时间将 html 内容加载到 DOM 中，您可以这样做它将您的 JavaScript 代码包含在 setTimeout() 调用中，如下所示：

            setTimeout(function() {
                var p = document.getElementById("DropDownPayment");              
                var eledropdownPayment = p.options[p.selectedIndex].value;              
                var ddlGift = document.getElementById("Gift");              
                var ddlPayment = document.getElementById("ddlSelectionPledge");              
                    if (eledropdownPayment == "0") 
                    {                  
                    ddlGift.style.display = "block";                  
                    ddlPayment.style.display = "none";              
                    } 
                    else 
                    {                  
                    ddlGift.style.display = "none";                  
                    ddlPayment.style.display = "block";              
                    }
             }, 300); //delay execution by 300 miliseconds

Answer 3

要执行脚本，您必须做的不仅仅是在页面中间添加那些脚本标签。最简单的选择是使用RegisterClientScriptBlock 方法。在服务器端，您需要调用该方法并将脚本作为第二个参数传递。

另一种选择是在您的 javascript 中实际包含一个函数。元素内容设置好后，调用该函数。重点是代码不会自动执行。