<div class="page1">
  Страница1
  <div><a href="/filter?filter=f1">Фильтр1</a></div>
  <div><a href="/filter?filter=f2">Фильтр2</a></div>
</div>

<div class="page2">
  Страница2
  <div><a href="/filter?filter=f3">Фильтр3</a></div>
  <div><a href="/filter?filter=f4">Фильтр4</a></div>
</div>

<div class="filterblock">
PAGE FILTER

  <?php

$style = isset($_GET['filter']) ? $_GET['filter'] : '';
?> 
  
<select>
		<option value="*">Все</option>
		<option value="f1" <?php if($filter=='f1' ) echo 'selected'; ?>>Фильтр1</option>
		<option value="f2" <?php if($filter=='f2' ) echo 'selected'; ?>>Фильтр2</option>
		<option value="f3" <?php if($filter=='f3' ) echo 'selected'; ?>>Фильтр3</option>
    <option value="f4" <?php if($filter=='f4' ) echo 'selected'; ?>>Фильтр4</option>
	</select>
	<div class="f1">Элемент1</div>
	<div class="f2">Элемент2</div>
  <div class="f3">Элемент3</div>
  <div class="f4">Элемент4</div>
</div>
.filterblock{
  float: right;
}

.page1, page2{
  float: left;
  margin: 0 100px;
}
var div = document.querySelectorAll('div');
		document.querySelector('select').onchange=function(){
			idSel = this.value;
			[].forEach.call(div, function(el){
				el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
			});
		};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js