Updating Selected Values of Dynamic Multiselectors in Pentaho-CDE

Question

Short version: How, using JavaScript or JQuery, do I dynamically reassign the selected value of a dynamically generated multiselector box to a default value given certain conditions are met on the change (user select) in another?

Long version:

I have three levels of multiselectors (State, Metro Area (aka MSA), County) dynamically dependent on each other, so that only counties and metro areas intersecting the chosen states are displayed in the respective selectors.

My problem is that if I select an MSA within, say, Maryland and then click on Texas, my table that the multiselectors filter (a parameterized MDX query) crashes.

Going by the error logs in Pentaho's catalina.out, it appears that the MSA (Metro Area) selector parameter becomes undefined when a state that does not contain the previously selected MSA is chosen.

I would like to make it so that when a new state or group of states is selected that does not include the currently selected MSA or County, those selectors revert to the default ("All") value. I'm a JQuery and JavaScript newby, so I need as much detail as possible, while still being considerate of your time.

---

Additional details, if needed:

The values in the MSA (Metro Area) selector change depending on the state(s) that are selected, and the County selector is dependent on State and Metro Area. This is all happening on an HTML page (generated by Pentaho's CDE Dashboard). The datasource for each is a parameterized SQL query (carried out by Pentaho).

When the "All" option for county and MSA is selected I can safely change the state selection:

When something other than the "All" option for county and MSA is selected I cannot change change the state selection without the dashboard crashing:

Data coming from SQL is a two-column array, with an MDX-formatted value and a clear-text label, with an All Value to specify the MDX parent 'All' value.

Answer 1

If you don't give much context, I can't give you a very specific answer, so I hope you'll have enough from this:

$('.one-input').change(function() {

    if ($(this).val() == 'something') {
        $('.other-input').val('default-value');
    }

});

Answer 2

Solved it. A lot of the code was Pentaho-CDE specific, namely because instead of attempting to change the value of the selector directly, I set a listener for the parameter that stores the selector value in the selector itself and changed that.

Placed the code below in Pentaho-CDE as a JS resource, then used a variant on @renaw's .change() answer to update all of my components selected values dynamically to a default just in case their previously selected value were to vanish from the new available option set.

$(document).ready(function() {
    // set default value to start with
    var all_msas = "[Metro Area]";
    var all_counties = "[County]";
    var all_zips = "[ZIP]";
   Dashboards.fireChange("msa_param", all_msas);
   Dashboards.fireChange("county_param", all_counties);
   Dashboards.fireChange("zip_param", all_zips);


    // what's happening on select
    $("#stateSelectorRow").on("change", function () {
            Dashboards.fireChange("msa_param", all_msas);
            Dashboards.fireChange("county_param", all_counties);
            Dashboards.fireChange("zip_param", all_zips);
    });

    $("#msaSelectorRow").on("change", function () {
        Dashboards.fireChange("county_param", all_counties);
        Dashboards.fireChange("zip_param", all_zips);
    });

   $("#countySelectorRow").on("change", function () {
       Dashboards.fireChange("zip_param", all_zips);
    });

})