将任何下拉列表中的更改事件的所有下拉选定值都放入url参数中？

Question

我在mypage.php三个丢弃起伏：

<select name='vehicle'> 
    <option value=''>Select</option> 
    <option value='bus'>Bus</option> 
    <option value='bike'>Bike</option> 
    <option value='car'>Car</option> 
</select> 

<select name='color'> 
    <option value=''>Select</option> 
    <option value='red'>Red</option> 
    <option value='blue'>Blue</option> 
    <option value='green'>Green</option> 
</select> 

<select name='cities'> 
    <option value=''>Select</option> 
    <option value='newyork'>New York</option> 
    <option value='london'>London</option> 
    <option value='paris'>Paris</option> 
</select> 

当我在所有下拉列表中打开网页第一次那么“选定”选项被选中。

问：

当我选择总线从车下拉那么URL应该是：

mypage.php?vehicle=bus 

后来，当我从颜色下拉列表中选择红那么URL应该是：

mypage.php?vehicle=bus&color=red 

那么当我选择巴黎从城市下拉那么URL应该是：

mypage.php?vehicle=bus&color=red&city=paris 

然后，我再次从车辆选择汽车那么URL应该是：

mypage.php?vehicle=car&color=red&city=paris 

Answer 1

您是否使用了特定的JS框架？此行为是标准表单提交行为。您需要将表单作为GET请求提交，以便将参数放入实际的URL中，但正如我所说，任何表单提交都会默认实现这一点，因为这是GET表单提交工作的方式。

在jQuery中，例如，你可以触发使用在特定变化形式提交：

$(function(){ 
    $("#someFormId select").change(function(){ 
    $("#someFormId").submit(); 
    } 
}); 

您的形式是这样的：

<form id="someFormId" name="myForm" action="/some/action" method="GET"> ... </form> 

Answer 2

这样的事情（使用jquery，使选择更容易）

var qs; 
function checkSelections() { 
qs = ''; 
$("select").change(function(x) { 
if ($(this).val.length > 0) { 
    if (qs.length > 0) { 
    qs += "&"; 
    } 
    qs += $(this).attr("name").val() + "=" + $(this).val(); 
} 
}); 
// do something with qs when you are ready to set the url 
window.location = /// whatever ///; 
} 

上面的代码可能包含很多错误，但你应该ld能够得到这个想法。