Как сделать функцию фильтра поиска двух страниц, используя JavaScript?

У меня есть Page1.html, который содержит выпадающее меню внутри формы с кнопкой отправки. Варианты включают Цвет и Форма.

Теперь допустим, у меня есть ассортимент фигур, отображаемых на Page2.html. Голубой квадрат, красный квадрат, синий круг, красный круг - все это отображается на Page2.html.

Возможно ли иметь файл JavaScript, в котором файл JavaScript будет считывать значения в форме Page1.html и, нажав кнопку "Отправить", будет перенаправлен на страницу Page2.html с отфильтрованными результатами?

Поэтому я выбираю цвет "синий" и форму "квадрат", нажимаю "Отправить", а затем перенаправляю меня на страницу Page2.html, где он скрывает все формы, кроме синих квадратов (которые я отфильтровал), или, возможно, они все спрятаны и отображает их?

Я ценю любые ответы!

Источник

2 ответа

Решение

Передавая данные из Page1.html через метод get и извлекая их в Page2.html, вы можете сделать следующее

page1.html

<!DOCTYPE html>
<html>
<body>
<form action="Page2.html" method="get">
    <select name="color" >
        <option>Blue</option>
        <option>Red</option>
    </select>
    <br><br>
    <select name="shape" >
        <option>Square</option>
        <option>Circle</option>
    </select>
    <br><br>
    <input type="submit" />
</form>
</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<body>
<style>
    .RedSquare{width:200px;height:200px;background:red;}
    .BlueSquare{width:200px;height:200px;background:blue;}
    .RedCircle{width:200px;height:200px;background:red;border-radius:50%;}
    .BlueCircle{width:200px;height:200px;background:blue;border-radius:50%;}
</style>
<div class="RedSquare"></div>
<div class="BlueSquare"></div>
<div class="RedCircle"></div>
<div class="BlueCircle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

color = getURLParameter('color');
shape = getURLParameter('shape');
classname="."+color+shape;
$("div").hide();
$(classname).show();
</script>
</body>
</html>
Источник

Я бы посоветовал вам сделать все это на одной странице. Пометьте элементы классами, которые описывают их цвет и форму следующим образом:

<div class="RedSquare item red square"></div>
<div class="BlueSquare item blue square"></div>
<div class="RedCircle item red circle"></div>
<div class="BlueCircle item blue circle"></div>

Затем при нажатии кнопки, например синей кнопки, вы делаете:

$('.item').hide(); $('.blue').show();
Источник
Другие вопросы по тегам