jQuery: Hide element when no select field option has been chosen (multiple fields)

Question

For a search form I only want to show the reset button when at least one option from four available selects has been chosen, and hide it once all select fields have been reset. With the following jQuery I address them all at once, which of course works fine for showing the button, but when I have have chosen options on more than one select field, e.g. chose a 'colour' and a 'size', the reset button disappears as soon as I clear one of the two select options.

How can I let jQuery make sure all selects have been reset in order to hide the reset element?

The current code:

jQuery('#my_searchform select').change(function() {
    if(jQuery(this).val()) {
        jQuery('.reset').show();
    } else {
        jQuery('.reset').hide();
    }
});

Answer 1

You need to check other selects also.

jQuery('#my_searchform select').change(function() {
    if(!($("#select1").val()||$("#select2").val()||$("#select3").val()||$("#select4").val())){
        jQuery('.reset').hide();
    }else{
        jQuery('.reset').show();
    }});

select1,select2,select3,select4 are the select IDs. You could assign a common class to them also and check for those selects (with class) for decision.