多选URL参数重定向

Question

我有两个选择框，一个用于城市，另一个用于颜色。 我想要实现的是，当你选择从其他下拉任何选项，将重定向到URL http://domain.com/?city=CITY&color=COLOR

起初我使用这种方法：

<script type="text/javascript"> 
    function change_url(val) { 
     window.location=val; 
    } 
</script>    
<select id="city" onchange="change_url(this.value);"> 
    <option value="http://domain.com/?city=newyork">New York</option> 
    <option value="http://domain.com/?city=paris">Paris</option> 
</select> 

这工作完全，如果我只有一个选择框，但在这种情况下，我想要传递多个选择框值到URL，我不想使用提交按钮！

我应该如何更改此代码？

<select id="city"> 
    <option value="newyork">New York</option> 
    <option value="paris">Paris</option> 
</select> 

<select id="color"> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select> 

Answer 1

尝试FIDDLE

javacript

function change_url(city,color) { 
     var baseURL = 'http://domain.com/?city=' + city + '&color=' + color; 
     window.location=baseURL; 
     //alert(baseURL); 
} 

$(function(){ 
     $('#city, #color').change(function(){ // attaching a handler to city and color dropdown list on Change 
      change_url($('#city').val(),$('#color').val()); 
     }); 
}); 

HTML

<select id="city"> 
    <option value="newyork">New York</option> 
    <option value="paris">Paris</option> 
</select> 

<select id="color"> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select> 

希望这对你的作品

Answer 2

<script type="text/javascript"> 
    function change_url(val) { 
     //you can use document.getElementById instead of jquery's api 
     var url = ""; 
     var color = $("#city").value(); 
     url += ("city=" + val + "&color=" + color) 
     window.location=url; 
    } 
</script>    
<select id="city" onchange="change_url(this.value);"> 
    <option value="http://domain.com/?city=newyork">New York</option> 
    <option value="http://domain.com/?city=paris">Paris</option> 
</select> 

<select id="color"> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select>