Question

我有Page1.html，其中包含一个表单内的下拉菜单（带有提交按钮）。选项包括颜色和形状。

现在让我们说我在Page2.html上展示了各种各样的形状。蓝色方块，红色方块，蓝色圆圈，红色圆圈都在Page2.html上显示。

是否可以有一个JavaScript文件，其中JavaScript文件将读取Page1.html表单上的值，并在单击提交按钮后，将重定向到带有过滤结果的Page2.html？

所以我选择颜色'蓝色'，形状'方形'，点击提交，然后让它重定向到Page2.html，它隐藏每个形状其他而不是蓝色方块（我过滤掉的那个），或者它们都隐藏起来并显示出来了？

我感谢任何答案！

Answer 1

通过从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>

Answer 2

我建议你在一页上完成所有操作。使用描述颜色和形状的类标记元素，如下所示：

<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();

如何使用JavaScript创建两页搜索过滤器功能？

2 个答案: