[Resolved] Conditional Filter Fields

[Author]

Posts

[davidB-26]

I am trying to set up a page that has conditional logic for filters.

I have a Contact Page with various Admissions Counselor.

Right now the page has a filter for Schools with four choices. A section for Region with multiple choices. About 15-20 Countries/States will be listed here.

The only School that has Regions is the School of Medicine. The other four schools have 1 or 2 individuals who cover all regions.

What I was wondering is that if I could accomplish this scenario... When you first visit the page only Schools is visible. If School of Medicine is Selected then the Regions Filter will display since it is only needed for that school. I am open to either Ajax Load on user click, or on page submit. Is something like this possible?

Thanks, as always for your assistance.

Dave

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Dave

You can't do this with Toolset as-is, the problem being that the conditional shortcodes are evaluated when the page is being generated on the server in the first place.

Types does have conditional display of fields dependent on the value of other fields which works in the back end and is available on the front end in CRED forms, but it doesn't help with the Views filters you are talking about.

So, you will need to add some custom JS to set this up yourself.

The first step is to set up your filter controls so that they have a wrapper element that can be used by jQuery to target them.

Here is an example of the Filter Editor for a custom search I set up to test this using two select dropdowns (in my case for custom fields with slugs 'status' and 'availability'):

[wpv-filter-start hide="false"]
[wpv-filter-controls]
<div class="control-status">
[wpml-string context="wpv-views"]Status:[/wpml-string] [wpv-control field="status" url_param="statuses"]
</div>
<div class="control-availability">
[wpml-string context="wpv-views"]Availability:[/wpml-string] [wpv-control field="availability" url_param="availability"]
</div>
[/wpv-filter-controls]
[wpv-filter-end]

Note how I have wrapped each control in a div with a class name of control-slug. You are free of course to modify this in your own set up.

Now I add the following custom JS:

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

        $('.control-availability').hide();

        $('.control-status select').change(function() {
            var current = $(this).val();
            if (current == 2) {
                $('.control-availability').show();
            }
        });
    });
})(jQuery);

The main thing, apart from the class names, you will need to edit here is the value of current you are testing against. My select options just store numbers as their values (and I will reveal the second dropdown when the option with value 2 is set in the first dropdown), so you will need to update this with the value you store for the School of Medicine.