如何将多个下拉值作为URL参数传递？
如何将多个下拉值作为URL参数传递？
提问于 2018-08-14 20:31:07
我试着用JQuery的url参数创建一个实时过滤器，我差不多成功了，但我还有更多的问题要解决。
即使在url中传递了每个所选下拉框的选定值，下拉框中的值也返回为零值。
$('#filters select').change(function(){
var string = $(this).attr('id');
var value = $(this).val();
$(this).each(function(){
window.location.search += string + '=' + value + '&';
})
});
<div class="col-lg-2" id="filters">
<div class="form-group mt-3">
<select class="form-control filter-selection" id="petStatus">
<option value="" selected>-- Status --</option>
<option value="2">Found</option>
<option value="1">Lost</option>
</select>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-paw"></i></span>
</div>
<select class="form-control filter-selection" id="petType">
<option value="" selected>-- Type --</option>
<option value="1">Cat</option>
<option value="2">Dog</option>
<option value="3">Other</option>
</select>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-venus-mars"></i></span>
</div>
<select class="form-control filter-selection" id="petGender">
<option value="" selected>-- Gender --</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar"></i></span>
</div>
<select class="form-control filter-selection" id="petSize">
<option value="" selected>-- Size --</option>
<option value="1">Big</option>
<option value="2">Mid-size</option>
<option value="3">Small</option>
</select>
</div>
</div>
我在互联网上到处寻找解决方案，但没有一个人有同样的问题。
有什么想法或建议吗？！
谢谢!
编辑我找到了解决方案，下面是我所做的：
$(function(){
let query = new URL(location).searchParams;
$("#petStatus").val(query.get("petStatus"));
$("#petType").val(query.get("petType"));
$("#petGender").val(query.get("petGender"));
$('#filters select').change(function(){
let filters = [];
$('#filters select').each(function(){
const string = $(this).attr('id');
const value = $(this).val();
if(value != '') {
filters.push(string + '=' + value);
}
});
window.location.search = filters.join('&');
});
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51841495
复制相关文章
相似问题
腾讯云开发者
