window.location.href добавляет вместо или перенаправления

Question

Я пытаюсь перенаправить браузер на текущую страницу, но с новыми параметрами, когда пользователь выбирает и опцию из выпадающего списка.

Из отладки я вижу, что URL, который я пытаюсь go получить, именно такой, как я хочу, но когда я делаю window.location.href (я также пытался заменить () et c .) он просто добавляет новые аргументы к текущему URL, а не заменяет его.

Я уже два дня пытаюсь это исправить, и это сводит меня с ума, я пробовал каждое решение, которое нашел в Интернете, и до сих пор ничего не получалось. Надеюсь, что кто-то может помочь мне здесь.

пример адреса, который я пытаюсь достичь, и сценарий создает это 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc'

, но вместо этого я получаю 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=asc&orderby=price&order=dsc'

событие, хотя скрипт производит 'http://localhost/wordpress/showroom/?page=2&orderby=price&order=dsc'

это мой выбор

<select id="post-sort">
 <option value="orderby=price&order=desc">Price - Highest First</option>
 <option value="orderby=price&order=asc">Price - Lowest First</option>
 <option value="orderby=year&order=desc">Age - Newest First</option>
 <option value="orderby=year&order=asc">Age - Lowest First</option>
</select>

и это моя javascript функция

$(document).ready(function () {
    $("#post-sort").on('change', function (event) {

        var sortValue = this.value;
        var url = JSON.parse(JSON.stringify(window.location.href));

        //get param string
        var urlParamsSection = url.split('?')[1];

        //If has params
        if (urlParamsSection) {
            //Split params
            var urlParams = urlParamsSection.split('&');
            //Loop all params
            urlParams.forEach(urlParam => {
                //if param contains order var => remove
                if (urlParam.indexOf('order') > -1) {
                    url.replace('&' + urlParam, '');
                }
            });

            url += '&' + sortValue;
        } else {
            url += '?' + sortValue;
        }

        console.log(url);
        window.location.href = url;
        return false;
    });
});

Answer 1

Надеюсь, это поможет вам.

window.history.pushState("http://example.ca", "Sample Title", "/example/path.html");

Answer 2

Используйте URL объект и используйте params.set () метод для добавления parameters

$("#post-sort").on('change', function(e) {

  let url = new URL('https://stackoverflow.com'); // new URL(window.location.href)
  let params = url.searchParams;
  let orderby = $('option:selected', this).data('orderby');
  let order = $('option:selected', this).data('order');

  params.set('orderby', orderby);
  params.set('order', order);

  console.log(url);
  //window.location.href = url;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="post-sort">
  <option data-orderby="price" data-order="desc" value="1">Price - Highest First</option>
  <option data-orderby="price" data-order="asc" value="2">Price - Lowest First</option>
  <option data-orderby="year" data-order="desc" value="3">Age - Newest First</option>
  <option data-orderby="year" data-order="asc" value="4">Age - Lowest First</option>
</select>

А также не используйте params в значении, одну опцию вы можете использовать в качестве атрибута data.

Answer 3

Используйте window.location = url вместо window.location.href

  console.log(url);
  window.location = url;