Почему не работает сортировка после get запроса?

Question

[struhovv]

Есть несколько страниц с кнопками, переводящими на страницу с фильтром элементов. При переходе по ссылке на странице в select отображается нужный option, но элементы не отфильтрованы по нужному значению.
Что еще нужно сделать, чтобы весь код работал? Только сегодня понял как работают GET запросы, но проблему до конца не решил.

Первая страница:

<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>

filter.php:

<div class="filterblock">

  <?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>

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

Например: нажимаю на ссылку на первой странице

<div><a href="/filter?filter=f1">Фильтр1</a></div>

Переносит на страницу filter.php

результат:



Пример:

Comments

[Шохрух Шаймардонов]

У вас кривой пример, т.к. относительные ссылки ведут на codepen.io, а не на вашу страницу. 2 варианта исправить:
1. Прописать
2. Изменить относительные ссылки на абсолютные

Ибо мы не сможем оценить как у вас что работает

[struhovv]

Шохрух Шаймардонов, исправил

[Шохрух Шаймардонов]

struhovv, кодепен неудачный вариант в вашем случае. Лучше в хостинг. К примеру webhostapp
А пока ничего не понятно ( по крайней мере лично мне )

Answer 1

[Алексей Чернявский]

Попробуйте так:

function filterDiv(){
      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(); // Подразумеваем, что нужный option уже выбран и нам надо просто после загрузки страницы отфильтровать элементы.
    document.querySelector('select').onchange=filterDiv; // эта же функция "вешается на onChange.
});

Но, на мой взгляд, т.к. у вас есть php backend, то можно уже на уровне php кода не выводить ненужные div'ы. Ставить им сразу display:none.

Переписал немного ваш код: https://codepen.io/achernyavskiy/pen/XWJyvpv

Comments

[struhovv]

Алексей Чернявский, Большое спасибо, все заработало!