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

How to do Page Redirection based on two drop down menu selections?

本文关键字：选择 重定向 下拉菜单 两个 何基于      更新时间：2023-09-26

我想从我的网站创建一个表单，其中用户有两个下拉框，值分别为body height和type of build。根据他们的选择，他们将被引导到一个页面，其中包含有关他们的特定/选定构建的信息。

为了了解我想要创建的内容，以下是我想要显示的表单。。如果用于BMX自行车指南

函数goToPage（）｛var类型=document.getElementById（"type"）.value；var高度=document.getElementById（"height"）.value；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>

选择街道/公园污垢赛马

<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>

<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>

所以，我更改了上面的代码。如果你还有什么问题，请告诉我。

PS：通常要将值重定向或传递到其他页面，您需要使用jquery$.post、$.get或$.ajax方法，而不是windows.location.href.

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

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

相关文章：