Hi

I have 3 dropdowns on the following page,

http://gilt.martinduys.com/index.php/places

I managed to get the region dropdown to get filtered based on the country selected in the first, the problem is when a user selects a region, all the regions disappears.

So to see what the problem is first select a country, then click the region dropdon, you'll see the regions within the country you selected, then again select a specific region then youll see that it clears all the values, any help would be appreciated as I have to get this done.

here is the code:

function DOMHotelFilter () {
        var currentSelection = Array();
        $$('.filterBox select').each(function (element) {
            element.addEvent('change',function(){
                // hide intro text if there is any
                // if ($('introText')) {
                //  $('introText').setStyle('display', 'none');
                // };
                $$('.filterBox select option[selected]').each(function  (element, index) {
                    currentSelection[index] = element.get('value');
                })
                // $$('#relatedTours li').each(function  (element) {
                //  element.setStyle('display', 'block');
                //  if ((!element.hasClass(currentSelection[0]))||(!element.hasClass(currentSelection[1]))||(!element.hasClass(currentSelection[2]))) {
                //      element.setStyle('display', 'none');
                //  };
                // })
                var filterSpinner = new Spinner($$('.filterBox')[0]);

                var request = new Request.JSON({
                                onRequest: function  () {
                                    filterSpinner.toggle();
                                },
                                onComplete: function  () {
                                    filterSpinner.toggle();
                                    // if (numberOfElementAfterFilter == 0) {
                                        loadPages();
                                    // };

                                },
                                onSuccess: function(jsonResponse) {
                                    // console.log($$('#hotelFilterBox select'));

                                    var regions  = $$('#hotelFilterBox select')[1];
                                    var selector = regions.getFirst().clone();

                                    regions.empty();
                                    selector.inject(regions);
                                    jsonResponse.regionFilter.each(function (region, index) {
                                        if ($chk(region)) {
                                            var existingValues = regions.getChildren().get('value');
                                            if (existingValues.indexOf(region.url_title) == -1) {
                                                var optionField = new Element('option',{
                                                    'value':region.url_title,
                                                    'text':region.title
                                                });
                                                if (currentSelection[1]==region.url_title) {
                                                    optionField.setProperty('selected', 'selected');
                                                };
                                                optionField.inject(regions);
                                            };
                                        };
                                    })



                                    // removing any existing elements because they get loaded va ajax now anyway
                                    $('relatedTours').empty();

                                    $('relatedTours').empty();

                                }
                            });

                // @info This gets called when a country is selected in the drop down on the places overview template
                var selected = element.getSelected();

                if ($$(selected).getProperty('class') == 'country')
                {
                    request.send({url:'index.php/modules/getSelectorHotelAndLodges/country/'+currentSelection[0]+'/region/all/rating/all'});
                }
                else
                {
                    var parentCountry = $$(selected).getProperty('class').toString().replace('region parent_', '');
                    var region = $$(selected).getProperty('value');

                    $$(selected).getProperty('value', parentCountry);
                    $$('#destinationFilter').getProperty('value', region);

                    $$(selected).getProperty('value', region);
                    $$('#destinationFilter').getProperty('text', region);


                    request.send({url:'index.php/modules/getSelectorHotelAndLodges/country/' + parentCountry + '/region/'+region+'/rating/all'});
                }

                /*if ($$($$(this).getSelected()).hasClass('region'))
                {
                //  var classes = $$($$(this).getSelected()).hasClass('region');
                //  var pieces = classes.toString().split(' ');

                //  alert(pieces);
                    //request.send({url:'index.php/modules/getSelectorHotelAndLodges/country/'+currentSelection[0]+'/region/'+currentSelection[0]+'/rating/all'});
                }
                // find a country
                else if ($$($$(this).getSelected()).hasClass('country'))
                {
                /// alert('country');
                    request.send({url:'index.php/modules/getSelectorHotelAndLodges/country/'+currentSelection[0]+'/region/all/rating/all'});
                }
                //request.send({url:'index.php/modules/getSelectorHotelAndLodges/country/'+currentSelection[0]+"/region/"+currentSelection[1]+"/rating/"+currentSelection[2]});
                */

            })
        })
    }

Thanks.

Can you perhaps make a separate test page on your site, containing only the dropdowns ? This will be a lot easier for us to test. Anyway, the problem may be that you use the same code for all three select's.