Question

这就是我想要做的事情，我觉得好像我可能会过度思考它。我可以轻松地创建一个下拉导航列表，但我需要的是组合两个不同的下拉列表来为用户提供选项，然后当他们单击按钮时，它会将它们发送到与他们的选择相对应的页面。

例如，下拉列表一：您需要什么类型的建议？
  -Career
  -Relationships
   - 健康

  droplist two：你想要什么样的布局？
   - 快速和肮脏的    - 标准
  -in-深度

然后我只需要在这些页面的每个组合的链接中编程。如何根据选择正确重定向程序？

Answer 1

假设你有一对这样的下拉菜单：

<form method="post"> 
  <p>What type of advice do you need?
  <br><select id="s1">
      <option>Career</option>
      <option>Relationships</option>
      <option>Health</option>
  </select>

  <p>What layout do you want?
  <br><select id="s2">
        <option>Quick and Dirty</option>
        <option>Standard</option>
        <option>In-depth</option>
    </select>

    <input type="button" onclick="send(this.form)" value="Send"/>
</form>

单击表单末尾的按钮会调用一个函数，该函数将重定向到您想要比较每个菜单中所选项目的页面。该函数应该接收对表单的引用（在this.form中传递），获取所选索引和文本（或值，如果您在每个option中使用它们）并在一个条件分支中测试它们： / p>

function send(form) {
    var s1 = document.getElementById("s1");
    var s2 = document.getElementById("s2");

    var choice1 = s1.options[s1.selectedIndex].text;      
    var choice2 = s2.options[s2.selectedIndex].text; 

    if (choice1 == "Career" && choice2 == "Quick and Dirty") {
        location.href = "http://quickdirtycareers.com";
    } else if (choice1 == "Career" && choice2 == "Standard") { 
        location.href = "http://standardcareers.com";
    } else {
        location.href = "http://careers.stackoverflow.com";
    }
}

这是一个带有工作样本的小提琴：http://jsfiddle.net/helderdarocha/TNZ9A/

（还有很多其他方法可以做，添加CSS，动态选择，焦点等。使用JQuery添加这些增强功能更容易。）

单击按钮时重定向的HTML导航菜单/表单列表

1 个答案: