如何根据第三个下拉列表项的选择切换不同的标签（下拉列表和列表）？

Question

I have 2 dropdownlist(lets say A and B) and 1 listItem (lets say C). I need to switch between dropdown (B) and listitem (C) depending on option selected on first dropdown (A) which has only two options. How do you switch like this using javascript?

  <tr id="trInclude" runat="server">
        <td class="label" valign="top">Include : </td>
        <td valign="top">
            <asp:DropDownList ID="ddlExpiring" runat="server" Visible="true"  onchange="reloadDisplayBfys(this.options[this.selectedIndex].value);">
                <asp:ListItem Value="1" Text="Only Expiring"></asp:ListItem>
                <asp:ListItem Value="0" Text="ALL"></asp:ListItem>
            </asp:DropDownList>

            <asp:Label ID="lblFunds" runat="server" Text="Funds" CssClass="label"></asp:Label>
        </td>
    </tr>
    <tr>
        <td class="label" valign="top" width="300">
            <asp:Label ID="lblBFY" runat="server" Text="Expiring budget fiscal year:"></asp:Label></td>
        <td valign="top">
            <asp:ListBox ID="lstBudgetFiscalYear" runat="server" SelectionMode="Multiple" Rows="5" Visible="false">
                <asp:ListItem Text="All" Value="" class="all" />
            </asp:ListBox>
            <asp:DropDownList ID="ddlBudgetFiscalYear" runat="server" Visible="false" onchange="reloadFY(this.options[this.selectedIndex].value);">
                <asp:ListItem Text="All" Value="" class="all"></asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>


 function reloadDisplayBfys(index) {
        var bel = document.getElementById("<%= ddlExpiring.ClientID%>");
        var bfy;
        if (bel.selectedIndex) {
            bfy = bel.options[bel.selectedIndex].value;
        }
        if (bfy == 0) {
            document.getElementById("<%= lstBudgetFiscalYear.ClientID%>").style.display = "block";
            document.getElementById("<%= ddlBudgetFiscalYear.ClientID%>").style.display = "none"; 
        }
        else {
            document.getElementById("<%= lstBudgetFiscalYear.ClientID%>").style.display = "none";
            document.getElementById("<%= ddlBudgetFiscalYear.ClientID%>").style.display = "block";

        }
    }

Answer 1

If asp:DropDownList works just like an html select element, then your selector for the value looks right. One way to use it would be to skip the "onchange" attribute and use a regular event listener like in the code below.

---

(Edited to meet the specifications in your response)
This solution uses a template element to store your lstFiscalYear option, which is conditionally inserted/removed:

 const firstDropdown = document.getElementById("firstDropdown"), secondDropdown = document.getElementById("secondDropdown"); firstDropdown.addEventListener("change", updateDisplay); function updateDisplay(event){ const isInitialState = secondDropdown.options[0].value == "default", useInitialState = parseInt(firstDropdown.value) == 0; if(isInitialState && !useInitialState){ alternativeOption = document.getElementById("alternativeOptionTemplate").content.cloneNode(true); secondDropdown.insertBefore(alternativeOption, secondDropdown.options[0]); secondDropdown.selectedIndex = 0; } else if(!isInitialState && useInitialState){ secondDropdown.removeChild(secondDropdown.options[0]); secondDropdown.selectedIndex = 0; } else{ /* User selected neither 0 nor 1 */ } }

 <select id="firstDropdown"> <option value="0">Zero</option> <option value="1">One</option> </select> <template id="alternativeOptionTemplate"> <option value="lastFiscalYear">Info about last fiscal year</option> </template> <select id="secondDropdown"> <option value="default">Default</option> </select>