To recap, I have one View (with filter controls and pagination) that lists the posts, and a second View (with filter controls but no pagination) that displays the markers on a map.
I'm going to add some JS so that whenever a filter control from the first View is changed it will perform the same change to the matching filter control in the second View. CSS can be used to hide the second set of filter controls.
First, I need to add classnames to the filter control sections of each View so that I can target them with JS (actually jQuery).
When editing the Views scroll down to the Output Editor and add a wrapper div around where the filter controls are inserted, e.g.
<div class="visible-controls">
[wpv-filter-meta-html]
</div>
[wpv-layout-meta-html]
I use the classes "visible-controls" and "hidden-controls" in my test example.
Now add the following JS to the custom JS editor of the Search and Pagination section of your first View with the visible controls.
(function ($) {
$( document ).on( 'ready js_event_wpv_parametric_search_results_updated js_event_wpv_pagination_completed', function( event, data ) {
$('.visible-controls select[name="wpv-colour"]').change( function(){
var current = $(this).val();
$('.hidden-controls select[name="wpv-colour"]').val( current ).change();
});
});
})(jQuery);
The first thing to note is the $(document).on() section. We are adding this code on the DOM ready event (i.e. when the page loads), but we also have to add it back again after any ajax update because of a search or pagination, using the two custom JS events provided by Views for that purpose which you can see in the code).
You don't need to touch that.
What you do need to touch is the next part.
My test site has just one filter control, a dropdown select field which I can inspect with my browser dev tools to see it can be targeted with name="wpv-colour".
So the code listens for a change in the select field and when that happens takes its value and updates the matching select field from the hidden filter controls (and triggers the change event on that field).
You will have to do something similar for each of the filter controls in your search.
