如何将多个下拉值作为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('&');
});
})回答 3
Stack Overflow用户
发布于 2018-08-14 20:45:53
如果您更改位置href或搜索，您的网站通常会重新加载。您可以在不触发重新加载的情况下操作location.hash，或者收集所需的所有参数，设置location.search，并通过再次读取url参数来恢复表单状态，或者将内容存储在浏览器中。
或者，您可以查看历史api。
Stack Overflow用户
发布于 2018-08-14 20:47:50
我会做这样的事情。不要忘记创建自己的filterContent函数，也不要忘记将URL加载到不同的select中。
function filterContent() {
document.querySelector('#filtered-content').innerHTML = 'Applied filters' + window.location.search;
}
$(document).ready(() => {
// TODO load values from URL into select
$('#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.history.pushState({
page: 'filtered'
}, 'Filtered', '?' + filters.join('&'));
filterContent();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="filtered-content"></div>
Stack Overflow用户
发布于 2018-08-14 20:51:12
尝试使用示例代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function(){
$('select').change(function(e){
var parameters = "";
$('select').each(function(){
parameters += ($(this).attr('id')+"="+this.value+"&");
});
window.location.search +=parameters;
});
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<select id="Select1">
<option value="1">Sri</option>
<option value="2">Kumar</option>
<option value="3">Dhana</option>
<option value="4">Kishore</option>
</select>
<select id="Select2">
<option value="1">Demo</option>
<option value="2">Values</option>
<option value="3">Soft</option>
</select>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51841495
复制相关文章
相似问题