Javascript 在jquery中使用两个下拉列表更新URL

我有两个这样的选择框

<select class="" id="sender" name="sender">
    <option value="">---Select sender ---</option>
    <option value="1">Corliss Barrie</option>
    <option value="2">Marcie Nava</option>
    <option value="3">Weston Bryand</option>
    <option value="4">Osvaldo Lasker</option>
    <option value="5">Regan Ruckman</option>
</select>

<select class="" id="reciever" name="reciever">
    <option value="">---Select sender ---</option>
    <option value="1">Araceli Scheff</option>
    <option value="2">Assunta Marsch</option>
    <option value="3">Yang Wengerd</option>
    <option value="4">Branden Purtee</option>
    <option value="5">Krystal Fresquez</option>
</select>

但我预期的url与此类似：

?sender=value&reciever=value

希望有人能帮助我。

---

多谢各位

您可以非常轻松地将逻辑外包到一个函数中，该函数仅在两个值都给定时才更改url

$('#sender, #receiver').change(changeUrl);


function changeUrl(){
    if($('#receiver').val() != "" && $('#sender').val() != "" ){
        url = "?sender="+$('#sender').val()+"&receiver="+$('#receiver').val();
        window.location = url;
    }
}

---

只需添加另一个事件侦听器和条件：

function changeURL(){
    if($('#sender').val()!="" &&$('#receiver').val()!=""){
        var url = "?sender="+$(this).val()+'&receiver="+$('#receiver').val();
        window.location = url;
    }
}
$('#sender').change(changeURL);
$('#receiver').change(changeURL);

这是一张工作票。在两个

select

元素中都添加了一个公共类

url

。然后在更改事件上执行功能

$('.url').change(function(){
    var sender = $('#sender').val();
    var receiver = $('#reciever').val(); 
    if(sender !== '' && receiver !== '') {
      var url = "?sender=" + sender + "&reciever=" + receiver;
      window.location = url;
    }
});

像这样使用它：

<select class="changeurl" id="sender" name="sender">
<option value="0">---Select sender ---</option>
<option value="1">Corliss Barrie</option>
<option value="2">Marcie Nava</option>
<option value="3">Weston Bryand</option>
<option value="4">Osvaldo Lasker</option>
<option value="5">Regan Ruckman</option>
</select>

<select class="changeurl" id="reciever" name="reciever">
<option value="0">---Select reciever ---</option>
<option value="1">Araceli Scheff</option>
<option value="2">Assunta Marsch</option>
<option value="3">Yang Wengerd</option>
<option value="4">Branden Purtee</option>
<option value="5">Krystal Fresquez</option>
</select>

$('.changeurl').on('change', function (e) {
if( $('#sender').val()!="0" && $('#reciever').val()!="0" ){
var newURLString = window.location.href + "?sender=" + $('#sender').val() + "&reciever=" + $('#reciever').val();

window.location.href = newURLString;  
}
});

---

有很多方法可以解决这个问题。您也可以看到针对此问题发布的一些更有效的答案。我选中了此选项，但当我从第一个下拉页面中选择一个值时，该页面正在重新编码，并将0设置为其他下拉值。URL看起来像这样

&发送者=0&接收者=3

如果两个下拉列表都选择正确，我需要重新加载页面。一个也没有，对我来说很好。当我选择两者时，它是重定向的。让我们看看。我检查了这个代码，但有一个问题。当我选择一个下拉页面时，另一个值自动设置为0。这样，发送方=0，接收方=5，反之亦然

sender=3，接收方=0

$('.changeurl').on('change', function (e) {
if( $('#sender').val()!="0" && $('#reciever').val()!="0" ){
var newURLString = window.location.href + "?sender=" + $('#sender').val() + "&reciever=" + $('#reciever').val();

window.location.href = newURLString;  
}
});