How to populate a drop down with values from JavaScript?

Question

I added a button to the ribbon toolbar button in my extension to the Tridion CMS. On click of the button a popup page will display with two drop downs. By changing the values in the first drop down control I should populate the values for second drop down control. In my case I am using ASP drop down list control. For the time being I will hard code the values to be populated to the second drop down in java script. For this requirement I am using the following code but I am not able to populate the value (Not Identifying 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 populate the values for second drop down from external JavaScript file?

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Rather than adding values on demand, you may use the approach below:

Add all the items beforehand to the DOM.
Hide the required items using jQuery logic.

You may refer the following post for a hint Hide options in a select list using jQuery

Please take a look at jQuery disable SELECT options based on Radio selected (Need support for all browsers) also

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 08 '12 at 05:58

LCJ

22,196
67
260
418

1

Thanks for your Response. It is not satisfying my criteria. This is all I am doing to implement the cascading dropdown lists. Where the second drop down list value will be populated from the first. Please suggest me a solution. – P.Muralikrishna Jun 08 '12 at 13:24

score 1 · Answer 2 · answered Jun 11 '12 at 08:44

1

I recently worked on a GUI extension where we populated a drop down based on the value of another drop down. 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 appends the whole <option> tag, where as yours is specified using the .val(), perhaps you could try this way?

The version I have is working great :)

answered Jun 11 '12 at 08:44

johnwinter

3,624
15
24

Thanks alot for giving the response. It seems you are using the Tridion controls. And you are implementing cascading dropdowns. Can you please tell me the logic with out happening the page refreshment how can we achieve that? Please help me in this issue. – P.Muralikrishna Jun 11 '12 at 10:22
well in my example i'm using the c.SystemDropDown which is defined as a normal – johnwinter Jun 11 '12 at 21:35
Please provide me the logic to implement the cascading dropdowns. Why I am asking because my page is refreshing when I am trying to implement the same. Please share the logic I am badly in need of that. – P.Muralikrishna Jun 12 '12 at 04:46
You are using ASP.NET controls, so the refresh of your page is most likely happening due to the postback. Did you try building the same logic without using Tridion, just in plain ASP.NET? – Frank van Puffelen Jun 12 '12 at 17:06
@Puff I tried creating the same with plain ASP.NET. In that case also the page getting refreshed. – P.Muralikrishna Jun 13 '12 at 03:59

How to populate a drop down with values from JavaScript?

2 Answers2

Linked