代码之家 › 专栏 › 技术社区 › 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 ///;
}

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

6 月前

Alex · 在轻量级中同时解构和不解构变量

6 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

6 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

6 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

user3472810 · Angular@Output/EventEmitter返回undefined

6 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

6 月前