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>

当我第一次打开页面时，然后在所有下拉列表中选择“已选择”选项。

问题：

当我从车辆下拉列表中选择总线时，网址应为：

mypage.php?vehicle=bus

然后，当我从颜色下拉列表中选择红色时，网址应为：

mypage.php?vehicle=bus&color=red

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

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

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

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

Answer 1

您使用的是特定的js框架吗？此行为是标准表单提交行为。您需要将表单作为GET请求提交，以便将params放在实际的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 ///;
}

上面的代码可能包含很多错误，但你应该能够理解。

在所有下拉列表的更改事件中，将所有下拉列表中的选定值放入url params中？

2 个答案: