我遇到了困难。我想在动态筛选器中创建查询字符串。目前,我已经添加了两种类型的筛选器 选择您最喜欢的运动
和 选择您最喜欢的食物:
..所以在未来会有更多的筛选器,并且只能是复选框和下拉框类型。因此,我希望将其完全动态化。以下是我的HTML代码:
<body>
<select class="getfilterchange" name="hobby">
<option value="">Select</option>
<option value="Chess">Chess</option>
<option value="Hockey">Hockey</option>
</select>
<h3>Select your favorite sports:</h3>
<label><input class="getfilter" type="checkbox" value="football" name="sport"> Football</label>
<label><input class="getfilter" type="checkbox" value="baseball" name="sport"> Baseball</label>
<label><input class="getfilter" type="checkbox" value="cricket" name="sport"> Cricket</label>
<label><input class="getfilter" type="checkbox" value="boxing" name="sport"> Boxing</label>
<label><input class="getfilter" type="checkbox" value="racing" name="sport"> Racing</label>
<label><input class="getfilter" type="checkbox" value="swimming" name="sport"> Swimming</label>
<br>
<h3>Select your favorite food:</h3>
<label><input class="getfilter" type="checkbox" value="choclate" name="food"> Choclate</label>
<label><input class="getfilter" type="checkbox" value="biscuits" name="food"> Biscuits</label>
<label><input class="getfilter" type="checkbox" value="candy" name="food"> Candy</label>
<label><input class="getfilter" type="checkbox" value="Cake" name="food"> Cake</label>
<br>
</body>
这里是一些jQuery代码的尝试:
<script type="text/javascript">
$(document).ready(function() {
var names = [];
$(".getfilter").click(function(){
if(jQuery.inArray($(this).attr('name'), names )=='-1'){
names.push($(this).attr('name'));
}
var favorite = [];
$.each($("input[name='"+$(this).attr('name')+"']:checked"), function(){
favorite.push($(this).val());
});
console.log(names);
console.log(favorite);
});
});
我期望的输出如下:
?sport=football~baseball~cricket&food=choclate~biscuits
如果用户首先选择的是食品,则应该按照以下方式操作:
?food=choclate~biscuits&sport=football~baseball~cricket
请帮我,我该如何实现这种功能 注意:我的过滤器是动态的,也就是说,如果我添加更多的过滤器,它们将自动嵌入到查询字符串中。 图中显示了Getvalues按钮..我想在复选框上单击时获取查询字符串。忘记没有按钮。谢谢
.serialize()
方法即可。 - Alexander