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

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

drop-down-menu html javascript php

Naveed · 技术社区 · 15 年前

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 回复 | 直到 15 年前

brad 15 年前

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

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

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

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

Hal 15 年前

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

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

推荐文章

Yahya · 不能将我保存在props中的id用作reactselect中的默认值

1 年前

RSW · 使用plotly绘制多个pandas列,并使用下拉菜单选择列

1 年前

Jake Hembree · 多个下拉框

1 年前

MaÅ¥o Valapka · 下拉菜单会扭曲其他按钮

1 年前

Santi · Shadcn/ui选择-当用户选择项目时更改状态

2 年前

João Bosco · 使用python player从选择下拉列表中选择一个值

2 年前

Xeschoz · 为discord bot制作下拉菜单时出错

2 年前

Meghan M. · JS新手:NodeList返回null但有元素

2 年前

Hiyanneri · CSS-如何使用CSS增加下拉列表的宽度?

2 年前

T.Omalley · 数据验证源Excel中的嵌套函数

2 年前