CODEWITHSUNDEEP
javascriptjqueryasp.netc#-4.0tridion
P.Muralikrishna
P.Muralikrishna

Reputation: 1289

How to populate a drop down with values from JavaScript?

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?

Upvotes: 4

Views: 1400

Answers (2)

johnwinter
johnwinter

Reputation: 3624

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

Upvotes: 1

LCJ
LCJ

Reputation: 22661

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

  1. Add all the items beforehand to the DOM.

  2. 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

Upvotes: 1

Related Questions