如何使用JavaScript中的值填充下拉列表？

Question

我在Tridion CMS擴展程序的功能區工具欄按鈕中添加了一個按鈕。 單擊該按鈕后，將顯示一個帶有兩個下拉菜單的彈出頁面。 通過更改第一個下拉控件中的值，我應該填充第二個下拉控件中的值。 就我而言，我正在使用ASP drop down list控件。 目前，我將對要填充到Java腳本第二個下拉列表中的值進行硬編碼。 對於此要求，我正在使用以下代碼，但無法填充值（未標識標簽）。

Java腳本代碼：

ABC.WCMS.RTFExtension.Popups.ButtonPopup.prototype._populate = function () {    
    var selectedValue = $('#functionalcomponent').value;//First dropdown selected value
    var dropdownId = $("#Dd");//Second Dropdown Control

        switch (selectedValue) {

            case "Home Ware":
                dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
                dropdownId.append($("<option> </option>").val("Air-Conditioners/Coolers").html("Air-Conditioners/Coolers"));              
                break;
            case "Education":
                dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
                dropdownId.append($("<option> </option>").val("Colleges").html("Colleges"));
                break;
            default:
                dropdownId.append($("<option> </option>").val("Select Sub-Category").html(""));
                dropdownId.append($("<option> </option>").val("No Value").html("No Value"));

        }
    return true;
}

ASPX控件：

<%--Dropdown1--%>
<asp:DropDownList ID="functionalcomponent" runat="server"></asp:DropDownList>
<%--Dropdown2--%>
<asp:DropDownList ID="Dd" runat="server"></asp:DropDownList>

如何填充來自外部JavaScript文件的第二個下拉列表的值？

Answer 1

您可以使用以下方法來代替按需添加值：

1. 預先將所有項目添加到DOM。

2. 使用jQuery邏輯隱藏所需的項目。

   您可以參考以下文章以獲得提示使用jQuery在選擇列表中隱藏選項

請看一下jQuery基於選定的Radio禁用SELECT選項（還需要所有瀏覽器支持）

Answer 2

我最近在一個GUI擴展上工作，我們根據另一個下拉列表的值填充了一個下拉列表。 當我使用javascript填充時，我有以下代碼：

$j(c.SystemDropDown).append("<option value=\"" + value + "\">" + value + "</option>");

如您所見，我的示例附加了整個<option>標記，您可以在其中使用.val()指定您的標記，也許您可​​以嘗試這種方式？

我使用的版本效果很好:)