Question

我创建了2个如下所示的下拉菜单

function selectCar(obj){
    var urlString = "/";
    var selectedCar = obj.options[obj.selectedIndex];
    if (selectedCar.value != "nothing"){
            window.location = window.location + selectedCar.value;
    }
}


<select name="selectcar1" onchange="selectCar(this)">
<option value="1234">audi</option>
<option value="3256">bmw</option>
<option value="7890">mercedes</option>
</select>


<select name="selectcar2" onchange="selectCar(this)">
<option value="5461">mazda</option>
<option value="3578">renault</option>
<option value="1247">ferrari</option>
</select>

以便根据选择内容来编辑此网址的参数。

example.com/compare?car1=1740&car2=1684

因此，如果用户从selectcar1中选择了一辆汽车，则网址中的car1发生了变化，而当selectcar2发生变化时，car2也受到了影响。

我目前将新值添加到url中，而不是替换特定变量。我该怎么办？

Answer 1

window.location = some/url;立即将请求重定向到该新URL。如果要比较有两个（或更多）参数，则必须等到收到这些参数。
此外，location对象具有许多属性，即protocol，host，pathname，search等。
因此，对于OP，脚本可能看起来像这样。

var car1 = 0;
var car2 = 0;

function selectCar(obj) {
  if (obj.name === 'selectcar1')
    car1 = obj.value;
  else
    car2 = obj.value;
  if (car1 && car2) { // both are > 0
    var newUrl = location.protocol + '//' + location.host + location.pathname + '?car1=' + car1 + '&car2=' + car2;
    console.log(newUrl);
    //location = newUrl;
  }
}

<select name="selectcar1" onchange="selectCar(this)">
  <option value="0">Select</option>
  <option value="1234">audi</option>
  <option value="3256">bmw</option>
  <option value="7890">mercedes</option>
</select>


<select name="selectcar2" onchange="selectCar(this)">
  <option value="0">Select</option>
  <option value="5461">mazda</option>
  <option value="3578">renault</option>
  <option value="1247">ferrari</option>
</select>

Answer 2

使用URL API可以简化此过程。

通过传递当前页面href，您可以设置或更新参数，同时保持现有参数

function selectCar(sel){

    var url = new URL(location.href);

    if(sel.value){
      url.searchParams.set(sel.id, sel.value)
      window.location.search = url.search
    }
}

请注意，我在选择项中添加了ID：<select id="car1" onchange="selectCar(this)"/>

DEMO

根据JavaScript中的下拉选择更改URL上的特定参数

2 个答案: