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

Update URL with two dropdown list in jquery

本文关键字：两个 下拉列表 更新 URL jquery      更新时间：2023-09-26

我确实有两个这样的选择框。

<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').change(function(){
    var url = "?sender="+$(this).val();
    window.location = url;
});

但我期望的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>

你的jquery代码会像这样：

$('.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;  
}
});
相关文章：