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

How to populate a drop down with values from JavaScript?

本文关键字：填充 下拉列表 何使用 JavaScript      更新时间：2023-09-26

我在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 文件填充第二个下拉列表的值？

您可以使用以下方法，而不是按需添加值：

  1. 事先将所有项目添加到 DOM。

  2. 使用 jQuery 逻辑隐藏所需的项。

    您可以参考以下帖子以获取提示 使用 jQuery 隐藏选择列表中的选项

请查看jQuery禁用基于所选无线电的SELECT选项（需要支持所有浏览器）

我最近在开发一个 GUI 扩展，我们根据另一个下拉列表的值填充了一个下拉列表。 当我使用 javascript 填充时，我有以下代码：

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

如您所见，我的示例附加了整个<option>标签，其中您的标签是使用 .val() 指定的，也许您可以尝试这种方式？

我拥有的版本运行良好:)

相关文章：