两个下拉列表表单以获取一个 url答案

【问题标题】：Two drop down lists form to get one url两个下拉列表表单以获取一个 url
【发布时间】：2014-12-04 01:23:04
【问题描述】：

我想创建两个下拉列表表单，例如第一个有“建议 A”和“建议 B”，第二个有“建议 1”和“建议 2”

例如，访问者会从第一个下拉列表中选择“建议 A”，从第二个下拉列表中选择“建议 2”。

点击提交按钮后，他会被重定向到http://www.domain.com/advice-a/advice-2/

我怎么能这样做？我只找到了列表 1 的示例代码，它会在 Google 上修改列表 2，这对我没有帮助。

【问题讨论】：

你能用jQuery还是直接的JavScript？
mod_rewrite 也可能会被探索，以将 GET 查询转换为您的格式。

标签： javascript forms

【解决方案1】：

这是一个示例，您可以轻松地对其进行编辑以使用您的特定选项。

http://jsfiddle.net/joshlankford/ysx0js3c/

var getURL = function(){
    var option1 = document.getElementById('dropDown1').value;
    var option2 = document.getElementById('dropDown2').value;
    var URL = 'http://www.domain.com/' + option1 + '/' + option2;
    alert(URL);
}

<select id="dropDown1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select id="dropDown2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>  

<button onclick="getURL()">Run</button>

【讨论】：

这是我重写此代码的方法之一：jsfiddle.net/uyr5bbdt/1
感谢您的帮助。
我用 location.href 替换了 alert。整个代码可以在所有手机上运行吗？如果没有，我需要什么代码才能使其在移动设备上运行？
我不明白为什么不，所有的移动浏览器都应该支持 location.href。

【解决方案2】：

您可以使用 java 脚本或 jquery 来执行此操作。点击提交调用java脚本方法。

function submitForm() {
   var valA = document.getElementById("listA").value;
   var val1 = document.getElementById("list1").value;
   document.getElementById("formId").action=valA+"/"+val1; // change this according to context root requirement.
   document.getElementById("formId").submit();
}

【讨论】：