dual select/dropdown lists

[emil2010]

Hi,

Has anyone here solved the problem of dual dropdown lists, that is selection in the first dropdown list limits the selection in the second one.

basicly selecting from the first dropdown list and feeding the id of that selection to the select for the second one for filtering....

Please help me if you can.

Regards,
Emil

[MartyJones]

I normally use JQuery to make an AJAX call to load the secondary drop down list based upon the selection changed event from the first drop down box.

[emil2010]

Yes thats how I imagined I would do it. but since the second dropdownlist is tied to something like this :

@ModelAttribute("yesnoes")
public java.util.Collection<YesNo> populateYesNoes() {
return YesNo.findAllYesNoes();
}

I have to filter this somehow, and re-load the contents of the second dropdown list. Can you give code examples ?

[MartyJones]

basically you need to pass in the "key" or unique identifier for the selected value of the parent select list into the method that will return the filtered child list values.

[emil2010]

I know WHAT to do basicly, just not HOW to do it.

code examples would be really appreciated.

like how to "re-fill" the second dropdownlist in javascript/jquery/dojo whatever works...

[MartyJones]

Ok,

Here is a javascript snippet that will load the secondary select box when the primary select box is changed (I am using JQuery here).

$('#vehicleMake').change(
    function() {
        $.getJSON('${lookupModelUrl}',
            {vehicleMakeId: $(this).val(), ajax: 'true'}, 
            function(data) {

                var html = '<option value=""></option>';
                var len = data.length;
                for (var i = 0; i< len; i++) {
                    html += '<option value="' + data[i].id + '">' + data[i].description + '</option>';
                }

                $('#vehicleModel').html(html);
            }
        );
    }
);

The primary select box has an id of "vehicleMake" and the secondary select box has an id of "vehicleModel". The method you invoke on your controller should return a json object with an id and description attribute if you copy my example verbatim.

Hope this helps.

Marty

[emil2010]

ok now Im starting to understand, and you just use that to populate the second box.

Excellent, you have been a great help!

[joshua4sabat]

I suggest you to use Ajax controls. I think you may get some solution.