@struhovv

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

Есть несколько страниц с кнопками, переводящими на страницу с фильтром элементов. При переходе по ссылке на странице в 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

результат:

5e25dd4f3a915344932037.png

Пример:
  • Вопрос задан
  • 94 просмотра
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Могилев
от 2 800 до 3 300 $
04 мар. 2021, в 22:39
2500 руб./за проект
04 мар. 2021, в 22:15
10000 руб./за проект
04 мар. 2021, в 21:50
20000 руб./за проект