javascript - 使用新的 params js 重新加载页面

Question

您好，我想在选择框值更改时刷新页面，将此值作为查询字符串添加到网址，这是我的代码

<select name="country_id" id="country" class="validate-select" title="Country">
    <option value=""></option>
    <option value="BH">Bahrain</option>
    <option value="KW">Kuwait</option>
    <option value="OM">Oman</option>
    <option value="QA">Qatar</option>
    <option value="SA">Saudi Arabia</option>
    <option value="AE">United Arab Emirates</option>
</select>

我为此编写的 JS 代码是

jQuery('#country').on('change', function () {
   var url = window.location.href;    
   url += '?country='+jQuery(this).val()+''
   window.location.href = url;
});

它工作正常，但它总是添加像这样的新参数，而不是替换以前的参数

?country=KW?country=QA

我想在添加新参数并刷新页面之前删除以前的参数。

Answer 1

替换window.location.href = url至window.location=window.location.href + "?country=" + this.value window.location.href只是返回当前页面的 href(URL)，请参阅下面的代码片段以了解

要从 href 中删除查询字符串，您可以添加 .split('?')[0]获取像 window.location.href.split('?')[0] 这样的 url 后

$(function(){
      $("#country").change(function(){
        debugger;
        window.location=window.location.href.split('?')[0] + "?country=" + this.value
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="country_id" id="country" class="validate-select" title="Country">
    <option value=""></option>
    <option value="BH">Bahrain</option>
    <option value="KW">Kuwait</option>
    <option value="OM">Oman</option>
    <option value="QA">Qatar</option>
    <option value="SA">Saudi Arabia</option>
    <option value="AE">United Arab Emirates</option>
</select>