在URL的末尾添加GET请求值

Question

我在类别页面上有一个WooCommerce表单，允许用户选择要在页面上显示的产品数量。取值为24、48和all。当选择其中一个选项时，将提交表单。我的问题是GET值正在替换URL中的现有值，而我需要将值添加到URL的末尾。

例如，如果我的URL是:www.example.com/?s=cars&post_type=product&type_aws=true，我更新了表单，URL变成:www.example.com/?show=48，而我需要把它添加到结尾，像这样:www.example.com/? s = cars& post_type = product& type_aws = true&显示= 48

这是我的HTML表单:

<form class="woocommerce-results-per-page" method="get">
<span>Show</span>
<select class="autosubmit" name="show">
<option value="48">48</option>
<option value="24">24</option>
<option value="-1">All</option>
</select>
<input type="hidden" name="orderby" value="rating">
</form>

这是我的jQuery

$(function(){
$(document).ready(function()
{
$( '.autosubmit' ).each( function()
{
$( this ).on( 'change' , null , function()
{
$( this ).parents( 'form' ).submit();
});
} );
});
});

Answer 1

试试这个:

$(document).ready(function () {
let select = $('.autosubmit');
url = new URL(window.location.href);
show = url.searchParams.get("show");
if (show !== null) {
select.find(`option[value="${show}"]`).prop('selected',true)
}

select.each(function () {
$(this).on('change', null, function () {
let url = window.location.search;
let params = url.substring(1, url.length).split('&');
let hidden_inputs = '';
let form = $(this).parents('form');
$.each(params, function (i, el) {
let param = el.split('=');
if (form.find(`select[name="${param[0]}"],input[name="${param[0]}"]`).length == 0) {
hidden_inputs += `<input type="hidden" name="${param[0]}" value="${param[1]}">`;
}
});

form.prepend(hidden_inputs).submit();

});
});
});