Question

I have the following jQuery code in my application that drives four cascading dropdowns. I have seen numerous examples online that force the user to select a value by adding a ‘–Select a Value—‘ option. However, what I am trying to do is, for the dropdowns, update automatically in the order if one of them changes.

update 2,3,4 if 1 changes and 3,4 if 2 changes, etc.

Dropdown1 Center Dropdown2 Geo Dropdown3 Sup Dropdown4 Emp

This is the jQuery code I have:

    $(function() {
        $('#divParentaccordion').accordion({ autoHeight: false }).accordion({       collapsible: true });
        $('#divGenericaccordion').accordion({ autoHeight: false }).accordion({ collapsible: true });
        $('#<% =ddCenter.ClientID %>').change(getGeo());
        $('#<% =ddGeo.ClientID %>').change(getSup());
        $('#<% =ddSup.ClientID %>').change(getEmp());  
       // Statements i assume should call the function when the event triggers                
    })


    function getGeo() {
        $.ajax({
            type: "POST",
            url: "./ObservationsReport.aspx/GetGeoList",
            data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                $('#<% =ddGeo.ClientID %>').removeOption(/./);
                for (var i = 0; i < geos.length; i++) {
                    var val = geos[i].Code;
                    var text = geos[i].Description;
                    $('#<% =ddGeo.ClientID %>').addOption(val, text);
                }

            }
        })
    }

    function getSup() {
        var center = $('#<% =ddCenter.ClientID %>').val();
        var geo = $('#<% =ddGeo.ClientID %>').val();
        $.ajax({
            type: "POST",
            url: "./ObservationsReport.aspx/GetSupList",
            data: "{center:'" + center + "',geo:'" + geo + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var sups = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                $('#<% =ddSup.ClientID %>').removeOption(/./);
                for (var i = 0; i < sups.length; i++) {
                    var val = sups[i].SOPId;
                    var text = sups[i].Name;
                    $('#<% =ddSup.ClientID %>').addOption(val, text);
                }
            }
        })
    }

    function getEmp() {
        var center = $('#<% =ddCenter.ClientID %>').val();
        var geo = $('#<% =ddGeo.ClientID %>').val();
        var sup = $('#<% =ddSup.ClientID %>').val();
        $.ajax({
            type: "POST",
            url: "ObservationsReport.aspx/GetEmpList",
            data: "{center:'" + center + "',geo:'" + geo + "',sup:'" + sup + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var emps = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                $('#<% =ddEmp.ClientID %>').removeOption(/./);
                for (var i = 0; i < emps.length; i++) {
                    var val = emps[i].Sop_Id;
                    var text = emps[i].Name;
                    $('#<% =ddEmp.ClientID %>').addOption(val, text);
                }
            }
        })
    }

What am I doing wrong? I have recently started programming in jQuery; still not completely familiar with how it handles the events and when. Please, any help will be appreciated.

Answer 1

I think your issue is that you’re expecting the population of a box from the ajax call to trigger that select’s onchange. This is not the case. Changes through javascript do not fire onchange. You will need to fire the onchange yourself.

For example, try changing getGeo to this:

function getGeo() {
        $.ajax({
            type: "POST",
            url: "./ObservationsReport.aspx/GetGeoList",
            data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(response) {
                var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                $('#<% =ddGeo.ClientID %>').removeOption(/./);
                for (var i = 0; i < geos.length; i++) {
                    var val = geos[i].Code;
                    var text = geos[i].Description;
                    $('#<% =ddGeo.ClientID %>').addOption(val, text);
                }

                // *** CALL getSup directly ***
                getSup() ;

            }
        })
    }

The key here is the explicit call to getSup as it will not be triggered onchange.