title: Reload page with new params js
body: <p>Hi i want to refresh page on <strong>change</strong> of my select box value add this value to url as a query string here is my code </p>
  
  <pre><code>&lt;select name="country_id" id="country" class="validate-select" title="Country"&gt;
      &lt;option value=""&gt;&lt;/option&gt;
      &lt;option value="BH"&gt;Bahrain&lt;/option&gt;
      &lt;option value="KW"&gt;Kuwait&lt;/option&gt;
      &lt;option value="OM"&gt;Oman&lt;/option&gt;
      &lt;option value="QA"&gt;Qatar&lt;/option&gt;
      &lt;option value="SA"&gt;Saudi Arabia&lt;/option&gt;
      &lt;option value="AE"&gt;United Arab Emirates&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And the JS code i wrote for this is </p>
  
  <pre><code>jQuery('#country').on('change', function () {
     var url = window.location.href;    
     url += '?country='+jQuery(this).val()+''
     window.location.href = url;
  });
  </code></pre>
  
  <p>Its working fine but its always adding new param like this not replacing previous one</p>
  
  <blockquote>
    <p>?country=KW?country=QA</p>
  </blockquote>
  
  <p>I want to remove previous param before adding new one and refresh page.</p>