para - ¿Cómo llenar un menú desplegable con valores de JavaScript?

menu desplegable responsive

Question

Agregué un botón al botón de la barra de herramientas de la cinta en mi extensión al Tridion CMS. Al hacer clic en el botón, se mostrará una página emergente con dos menús desplegables. Al cambiar los valores en el primer control desplegable, debo rellenar los valores para el segundo control desplegable. En mi caso, estoy usando el control de ASP drop down list . Por el momento, codificaré los valores que se completarán en el segundo menú desplegable en el script java. Para este requisito estoy usando el siguiente código pero no puedo completar el valor (No identificando la etiqueta).

Código de script 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;
}

Controles ASPX:

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

¿Cómo puedo llenar los valores para el segundo menú desplegable del archivo JavaScript externo?

Answer 1

Recientemente trabajé en una extensión de la GUI donde llenamos un menú desplegable basado en el valor de otro menú desplegable. Cuando llego usando javascript, tengo el siguiente código:

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

Como puede ver, mi ejemplo agrega toda la etiqueta <option> , donde como se especifica con el .val() , ¿podría intentarlo de esta manera?

La versión que tengo está funcionando genial :)

Answer 2

En lugar de agregar valores a pedido, puede usar el siguiente enfoque:

1. Agregue todos los artículos de antemano al DOM.

2. Oculte los elementos requeridos usando la lógica jQuery.

   Puede consultar la siguiente publicación para obtener una pista Ocultar opciones en una lista de selección usando jQuery

Por favor, eche un vistazo a jQuery deshabilitar las opciones SELECCIONAR en función de la Radio seleccionada (necesita compatibilidad para todos los navegadores) también