在jquery中有兩個下拉列表的更新URL

我有兩個像這樣的選擇框。在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>

我的問題是我需要這兩個選擇框中的值更新網址，只有當兩個下拉列表中選擇。

我可以做一個像下面這樣的下拉菜單，但不知道如何用兩個下拉菜單來做到這一點。

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

但我的預期網址是類似於這樣：

?sender=value&reciever=value

希望有人可以幫助我。謝謝。

來源

2015-12-02 user3733831

，你可以很容易外包的邏輯成一個函數，只有當這兩個值給出

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


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

來源

2015-12-02 13:38:06

我檢查這個代碼，但有一個問題。當我選擇一個下拉頁面重新加載，其他值自動設置爲0.像這樣'sender = 0＆receiver = 5'，反之亦然'sender = 3＆receiver = 0' – user3733831

只需添加另一個事件偵聽器和條件的變化網址：

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

來源

2015-12-02 13:38:47 Matthew

這裏是一個工作fiddle。向select元素添加了常見的類url。然後在change事件上做功能。

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

來源

2015-12-02 13:40:53 deepakb

有很多方法來處理這個。您也可以看到針對此問題發佈的更多有效答案。 – deepakb

我檢查了這一點，但是當我從第一個下拉頁面選擇一個值是重新編碼，並設置0作爲其他下拉值。 URL看起來像這樣'＆sender = 0＆reciever = 3' – user3733831

我需要頁面重新加載，如果兩個下拉選擇正確。不是一個。 – user3733831

使用方法如下：

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

來源

2015-12-02 13:40:53

這也與其他人一樣工作 – user3733831

我已修改並檢查。它的工作現在很好。 –

在jquery中有兩個下拉列表的更新URL

回答

相關問題