Related dropdown menu issue

0
votes

I'm polishing up a bit of jquery I wrote that works on 2 dropdown boxes. Basically, when the first dropdown is changed, it filters the second dropdown to show only the applicable choices. If the first choice (value: "none|") is chosen in the first dropdown, it shows no choices in the second

It works great, most of the time. Here's the issue: If you select the first choice in the first dropdown, the second dropdown clears out. But if you then choose another option in the first dropdown, the second stays empty when it shouldn't.

I'd appreciate if you can help me figure this out. You can find the dropdown boxes here: http://goinspire.com/jwrp-hotel-registration/.

PS: If it makes a difference (but I think it doesn't), it's a WordPress site and the form is generated by GravityForms.

PS: here's the code:

tripFilter = function () {

        var tripClass = '.hotel-trip select',
            hotelClass  = '.hotel-name select',
            unusedClass = '.unused-options select';
        jQuery(tripClass).change(function(){
            //testFunc();

            var tripSelect = jQuery(tripClass),
                trip = tripSelect.val(),
                hotelSelect = tripSelect.parents('form').find(hotelClass);
            if (trip === "none|"){
                jQuery(hotelClass+" > option").each(function() {
                    jQuery(this).clone().appendTo(unusedClass);
                    jQuery(this).remove();
                }); 
            } else {
                tripnum =  trip.match(/JWRP (\d*)/)[1];

                //var hotelChoices = [];
                jQuery(unusedClass+" > option").each(function() {
                        jQuery(this).clone().appendTo(hotelClass);
                        jQuery(this).remove();
                });
                jQuery(hotelClass+" > option").each(function() {
                    hotelMatch = jQuery(this).val().match(/(\d*) /);
                    //console.log(hotelMatch);
                    if (hotelMatch === null || hotelMatch[1] != tripnum){
                        jQuery(this).clone().appendTo(unusedClass);
                        jQuery(this).remove();
                        //console.log("not a match!");
                    };
                });

            }

    });
};




jQuery(document).ready(function () {
    tripFilter();
});
jQuery(document).bind('gform_post_render', function(event, form_id){
    if(form_id == 38) {
        tripFilter();
    }
});
1
javascriptjquerywordpressgravity-forms-plugin
Use should paste relevant part of the code here so future readers could benefit from it - in case of url changes, site going down or some other issues. - Mauno Vähä
just check your browser's console and fix those errors first - Alex
I'm working on those 2, but I don't think they're related to the error - user3515
see code above. thanks - user3515

1 Answers

0
votes

If I have understood properly, first dropdowm guides second. So, I think you might just add a listener on "change" event of first dropdown, to perform your function every time the value of first input goes through some change.

Try this way: 

$(document).ready(function(){
    $('#38').bind('change', tripFilter)
});