How to fill out dropdowns from JavaScript?

Question

I added a button to the ribbon toolbar button in my extension to Tridion CMS. When you click on the button, a pop-up page appears with two drop-down lists. By changing the values ​​in the first control drop, I have to fill in the values ​​for the second control of the drop-down list. In my case, I am using an ASP drop down list control. Currently, I will hard code the values ​​to be populated in the second drop-down list in the java script. For this requirement, I use the following code, but I cannot fill in the value (Do not identify the tag).

Java script code:

 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 controls:

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

How can I fill in the values ​​for the second dropdown from an external JavaScript file?

Answer 1

Instead of adding values ​​on demand, you can use the following approach:

• Add all elements to the DOM.

• Hide required elements using jQuery logic.

  You can link to the next post for a hint Hide options in a select list using jQuery

Take a look at jQuery disable SELECT options based on the selected radio (need support for all browsers) and

Answer 2

I recently worked on a GUI extension where we populated a drop down list based on the value of another drop down list. When I populate using javascript, I have the following code:

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

As you can see, my example adds the entire <option> , where, as you pointed out, using .val() , maybe you could try this method?

The version I have works fine :)