javascript - 需要将内容占位符 id 与 div id 连接起来以获取 JavaScript 代码

Question

当从下拉列表中选择特定值时，我试图实现显示/隐藏 div。但我必须将内容占位符 id 与 div 名称连接起来。如果我不这样做，代码块将无法工作。

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script type="text/javascript">
        function ShowHideDiv() {

        var ddlPassport = document.getElementById('<%= ddlAnnualTax.ClientID %>').value;
        var dvPassport = document.getElementById('<%= dvPassport.ClientID %>').value;

        ContentPlaceHolder1_dvPassport.style.display = ddlPassport == "2" ? "block" : "none";
    }
</script>


<div class="div_labels">
        <asp:DropDownList ID="ddlAnnualTax" runat="server" Height="35px" Font-Size="Medium" Width="15%" Enabled="true" onchange="ShowHideDiv()">
            <asp:ListItem Enabled="true" Text="select..." Value="-1"></asp:ListItem>
            <asp:ListItem Value="1">first year</asp:ListItem>
            <asp:ListItem Value="2">second year</asp:ListItem>
        </asp:DropDownList>   
    </div>
    <br />
    <div class="div_labels"><div id="dvPassport" style="display: none" runat="server"> <input type="text" id="txtPassport" /></div></div>
</asp:Content>

代码中的ContentPlaceHolder1是内容占位符id，我需要显示/隐藏的div是dvPassport。所以我必须制作 ContentPlaceHolder1_dvPassport 才能使代码正常工作。为什么会这样？

Answer 1

尝试使用此代码

<script type="text/javascript">
        function ShowHideDiv() {

        var ddlPassport = document.getElementById('<%= ddlAnnualTax.ClientID %>').value;
        document.getElementById('<%= dvPassport.ClientID %>').style.display = ddlPassport == "2" ? "block" : "none";
    }
</script>

替换ContentPlaceHolder1_dvPassport与 document.getElementById('<%= dvPassport.ClientID %>') 。希望它能起作用。但我不能说，用 div 标签添加内容占位符 id 的原因是什么。