在任何下拉列表的更改事件中将所有下拉列表选定的值放入 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

然后当我从城市下拉列表中选择巴黎，则网址应为：

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

然后我再次从车辆中选择汽车，则网址应为：

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

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