如何基于两个下拉菜单选择进行页面重定向？

Question

I want to create a form from my website where the user has two dropdown boxes with values say body height and type of build . 我想在我的网站上创建一个表单，其中用户有两个下拉框，其值分别为body height和type of build 。 Depending on their selection, they would be directed to a page with information about their specific/selected build. 根据他们的选择，他们将被定向到一个页面，其中包含有关其特定/选定构建的信息。

To have an idea of what I want to create, here is the form i wish to display.. the use if for a BMX bike guide 要了解我要创建的内容，以下是我要显示的表格。.如果用于BMX自行车指南

function goToPage() { var type = document.getElementById("type").value; 函数goToPage（）{var type = document.getElementById（“ type”）。value; var height = document.getElementById("height").value; var height = document.getElementById（“ height”）。value; if(type !== 0 && height !== 0) { window.location = "http://www.maltabmx.com/About.html?jtype=" + 1 + "&height=" + 1; if（type！== 0 && height！== 0）{window.location =“ http://www.maltabmx.com/About.html?jtype=” + 1 +“＆height =” + 1;
  window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 1 + "&height=" + 2; window.location = "http://www.maltabmx.com?jtype=" + 1 + "&height=" + 3; window.location = "http://www.maltabmx.com/About.html?jtype=" + 1 + "&height=" + 4; window.location = "http://www.maltabmx.com/Footage.html?jtype=" + 1 + "&height=" + 5; window.location = "http://www.maltabmx.com?jtype=" + 1 + "&height=" + 6; } } 
 <form> <p> Type of Terrain: </p> 
Select Street/Park Dirt Racing 选择街道/公园泥土赛车
 <p>Body Height</p> <select id="height"> <option value="0" id="Select">Select</option> <option value="1" id="5ft">4ft</option> <option value="2" id="5.5ft">4.25ft</option> <option value="3" id="5.5ft">4.50ft</option> <option value="4" id="6ft">4.75ft</option> <option value="5" id="5ft">5ft</option> <option value="6" id="5.5ft">5.25ft</option> <option value="7" id="6ft">5.50ft</option> <option value="8" id="5ft">5.75ft</option> <option value="9" id="5.5ft">6ft</option> <option value="10" id="6ft">6.25ft</option> </select> <br /><br /> <input onclick="goToPage();" type="button" value="Submit" /> </form> 

Answer 1

<html>
 <head>

  $(document).ready(function() {

      $('#submit').click(function(){ 

      var type= $("#type").val();
      var height = $("#height").val();

      window.location.href = 'http://www.someweb.com/page.php?type='+type+'&&height='+height;

    });

 });

  </head>
  <body>

 <form>
 <p> Type of Terrain: </p>

  <select id="type">
    <option value="1" id="Street">Street</option>
    <option value="2" id="Dirt">Dirt</option>
    <option value="3" id="Park">Park</option>
    <option value="4" id="Racing">Racing</option>
    </select>

    <p>Body Height</p>
    <select id="Height">
    <option value="1" id="5ft">5ft</option>
    <option value="2" id="5.5ft">5.5ft</option>
    <option value="3" id="6ft">6ft</option>

    </select>

    <br /><br />

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

    </form>
  </body>
</html>

So, i changed the code above. 因此，我更改了上面的代码。 Let me know if you still hve some questions. 让我知道您是否还有其他问题。

PS: normally to redirect or pass values to other pages you would want to use the jquery $.post, $.get or $.ajax methods instead of windows.location.href. PS：通常将值重定向或传递到其他页面，您需要使用jquery $ .post，$。get或$ .ajax方法而不是windows.location.href。

Have a look here http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ 在这里看看http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

EDITED - Working solution: http://jsfiddle.net/YXW7K/13/ 编辑-工作解决方案： http : //jsfiddle.net/YXW7K/13/

如何基于两个下拉菜单选择进行页面重定向？

问题描述

1 个解决方案

解决方案1
1 2012-07-10 15:29:24

如何基于两个下拉菜单选择进行页面重定向？

问题描述

1 个解决方案

解决方案1 1 2012-07-10 15:29:24

解决方案1
1 2012-07-10 15:29:24