<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';
      });
    };