Why does not sort after the get request?

There are several pages with buttons that translates to the page with the filter elements. When you click on the link on the page is displayed in select the desired option, but the elements are not filtered by the desired value.
What else you need to do to make all the code work? Just today realized how to work and GET requests, but the problem is not completely solved.

First page:

<div class="page1">
Page1
 the <div><a href="/filter?filter=f1">Filter1</a></div>
 the <div><a href="/filter?filter=f2">Фильтр2</a></div>
</div>


Second page:

<div class="page2">
Page2
 the <div><a href="/filter?filter=f3">Фильтр3</a></div>
 the <div><a href="/filter?filter=f4">Фильтр4</a></div>
</div>


filter.php:

<div class="filterblock">

<?php

$style = isset($_GET['filter']) ? $_GET['filter'] : ";
?> 

<select>
 <option value="*">All</option>
 <option value="f1" <?php if($filter=='f1' ) echo 'selected'; ?>>Filter1</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">Item1</div>
 <div class="f2">Элемент2</div>
 <div class="f3">Элемент3</div>
 <div class="f4">Элемент4</div>
</div>


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


Example: click on the link on the first page

the <div><a href="/filter?filter=f1">Filter1</a></div>

Transfers to the page filter.php

the result:

5e25dd4f3a915344932037.png

Example:
April 4th 20 at 13:02
1 answer
April 4th 20 at 13:04
Solution
Try this:
filterDiv function(){
 var div = document.querySelectorAll('div');
 idSel = this.value;
 [].forEach.call(div, function(el){
el.style.display=(idSel=="*"||idSel==el.id)?'block':'none';
});
};
$(document).ready(function(){
 filterDiv(); // assume that the desired option is already selected and we need just after the page loads to filter the items.
 document.querySelector('select').onchange=filterDiv; // this function "onChange hung up on.
});

But, in my opinion, because you have a php backend, it is possible at the level of php code not output unnecessary div's. To put them from display:none.

Rewrote a little your code: https://codepen.io/Mortimer_Kulas55/pen/XWJyvpv
@Mortimer_Kulas55, thank you very much, it worked! - richard commented on April 4th 20 at 13:07

Find more questions by tags jQuery