Question

我正在尝试设置一个下拉菜单选择器。

当访问者从第一个下拉菜单中选择“沃尔沃”，然后从第二个下拉菜单中选择“白色”，然后点击提交按钮。他应该跳到URL 1，依此类推。

我可以这样做吗？

<body>

  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

  <select>
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </select>

</body>

Answer 1

<form target="_blank" action="/page_url" method="get">
  <select name="carbrand">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel" selected="selected">Opel</option>
    <option value="audi">Audi</option>
  </select>

  <select name="carcolor">
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="red" selected="selected">Red</option>
    <option value="blue">Blue</option>
  </select>

  <br/><br/>

  <input type="submit" value="Submit">  
</form>

您可以使用form和input标签。

如上例所示，单击按钮后，将打开一个新页面（target="_blank"属性会在新窗口或标签中打开URL）。

在这种情况下，使用method="get"表单属性，将下拉列表的值作为参数传递到URI /page_url?carbrand=opel&carcolor=red中。如果改为使用method="post"表单属性，则URL中不存在下拉列表的值。

Answer 2

我认为您应该这样使用：

    <option value="volvo"><a href='http://example.com'>Volvo</a></option>

  </select>```

Answer 3

您可以将下拉列表放入表单中，这样，在提交表单时（使用“提交”按钮），您就可以使用表单值来确定要加载的内容。

或者，如果您要在没有服务器端逻辑的情况下执行此操作，则可以用简单的<button type="button"...>替换“提交”按钮，然后单击该按钮即可处理逻辑以打开所需的页面。

如何使用“提交”按钮添加两个选择标签以跳转到URL URL

3 个答案: