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

【问题标题】：How to populate a drop down with values from JavaScript?如何使用 JavaScript 中的值填充下拉列表？
【发布时间】：2012-06-12 04:50:00
【问题描述】：

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

【问题讨论】：

标签： javascript jquery asp.net c#-4.0 tridion

【解决方案1】：

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

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

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

我的版本很好用:)

【讨论】：

非常感谢您的回复。看来您正在使用 Tridion 控件。而且您正在实施级联下拉菜单。你能告诉我在没有发生页面刷新的情况下我们如何实现这一点的逻辑吗？请帮助我解决这个问题。
在我的示例中，我使用的是在扩展中定义为普通
请提供实现级联下拉菜单的逻辑。为什么我要问，因为当我尝试实现相同的页面时，我的页面正在刷新。请分享我急需的逻辑。
您正在使用 ASP.NET 控件，因此页面的刷新很可能是由于回发而发生的。您是否尝试在不使用 Tridion 的情况下仅在普通 ASP.NET 中构建相同的逻辑？
@Puff 我尝试使用普通的 ASP.NET 创建相同的内容。在这种情况下，页面也会刷新。

【解决方案2】：

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

预先将所有项目添加到 DOM。
使用 jQuery 逻辑隐藏所需的项目。

您可以参考以下帖子以获得提示Hide options in a select list using jQuery

也请看jQuery disable SELECT options based on Radio selected (Need support for all browsers)

【讨论】：

感谢您的回复。它不符合我的标准。这就是我为实现级联下拉列表所做的一切。第二个下拉列表值将从第一个填充。请给我一个解决方案。