Question

我有两个像这样的选择框。

<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>

我的问题是我需要使用这两个选择框值更新网址，只有选中了两个下拉菜单。

我可以像下面的一个下拉菜单那样做，但不知道如何用两个下拉菜单做到这一点。

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

但我的预期网址与此类似：

?sender=value&reciever=value

希望有人可以帮助我。谢谢。

Answer 1

你可以很容易地将逻辑外包给一个函数，只有在给出两个值时才改变url

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


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

Answer 2

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

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

Answer 3

这是一个有效的fiddle。为url元素添加了一个公共类select。然后在更改事件上执行功能。

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

Answer 4

像这样使用：

<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;  
}
});

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

4 个答案: