Conditional Display of a Filter Fields

This thread is resolved. Here is a description of the problem and solution.

Problem:
Make the visibility of one View filter control depend on the value selected in another filter control.

Solution:
You'll need to apply some JavaScript to create your own solution. An example of such code would be:

( function( $ ) {
    $( document ).ready( function(){
 
        $('.state-filter').hide();
 
        $('#wpv_control_select_wpcf-country').change( function(){
 
            if ( $(this).val() == 1 ){
                $('.state-filter').show();
            } else {
                $('.state-filter').hide();
            }
        });
    });
})( jQuery );

The field names need editing, and the wrapper div for the form control which should be hidden in this example requires the class "state-filter" adding.

This support ticket is created 5 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by Kate 5 years, 11 months ago.

Assisted by: Nigel.

Author

Posts

December 12, 2018 at 2:05 am #1164267

Kate

I am trying to show the 'Search by State' field. Only when a particular 'Country' field option is selected.

See here: hidden link

I'm trying to show the 'Search by State' field. When 'Australia' is selected as the Country.

I've tried both of the following (see attachment) and I cannot get it to work.

I'd love your help with this - thanks!

December 12, 2018 at 11:20 am #1164691

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Kate

The wpv-conditional shortcodes won't work for what you want.

They are evaluated once when the page is being constructed by the server before being delivered to the browser.

What you want is to react to changes in the filter settings in the browser itself.

We have something related in Forms (to hide/reveal sections of the form depending on field selections) but not in View search filters.

You would need to write a little JS to achieve this.

Add a class of "state-filter" to the form group div that wraps your state selector, and then try adding this custom JS:

( function( $ ) {
	$( document ).ready( function(){

		$('.state-filter').hide();

		$('#wpv_control_select_wpcf-country').change( function(){

			if ( $(this).val() == 1 ){
				$('.state-filter').show();
			} else {
				$('.state-filter').hide();
			}
 		});
	});
})( jQuery );

I didn't test it, but it is along the lines of what you need.

December 13, 2018 at 12:36 am #1165095

Kate

Perfect! Thank you so much Nigel, this worked great! 😀