代码之家 › 专栏 › 技术社区 › Naveed

在任何下拉列表的更改事件中,是否将所有下拉列表的选定值放在url参数中?

drop-down-menu html javascript php

Naveed · 技术社区 · 14 年前

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

2 回复 | 直到 14 年前

brad 14 年前

您使用的是特定的js框架吗?这种行为是提交行为的标准形式。您需要将表单作为GET请求提交,以便将参数放在实际的URL中,但是正如我所说的,任何表单提交都会在默认情况下实现这一点,因为GET表单提交就是这样工作的。

例如,在jQuery中,您可以使用以下命令触发表单在选择更改时提交:

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

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

Hal 14 年前

类似这样的内容(使用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 ///;
}

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前