Question

所以我想根据他们选择的2个不同的下拉菜单将用户引导到不同的页面

所以如果我们有：
菜单1
女孩
男孩

和
菜单2
蓝色
绿色
黄
红色

如果他们选择女孩+蓝色，男孩+蓝色，男孩+绿色等，我想重定向到不同的页面。适用于所有组合。非常感谢您的帮助！我当然试过搜索但是找不到如何处理这个相当简单的情况。

这是我到目前为止所拥有的：

 <td><span class="style1">You're a:</span><br>
                    <select name="select1" id="select1" onchange="getACupOfCoffee(this)">
                      <option selected="selected">-- Please Select --</option>
                      <option value="1">Male seeking Female</option>
                      <option value="2">Female seeking Male</option>
                      <option value="3">Male seeking Male</option>
                      <option value="4">Female seeking Female</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td><img src="http://cdn.qtxi.com/dm/datespace/_spacer.gif" height="35" width="300"></td>
                </tr>

                <tr>
                  <td><span class="style1">Relationship I'm looking for:</span><br>
                    <select name="select2" id="select2">
                      <option>-- Please Select --</option>
                      <option value="1b">Casual</option>
                      <option value="2b">Serious / Longterm</option>
                      <option selected="selected" value="3b">Friend</option>
                      <option value="4b">Nothing</option>
                    </select></td>
                </tr>
                <tr>
                </tr>
              <tr>
                  <td><input type="image" src="continue2.jpg" width="149" height="37" border="0" /><a onclick="internalLink=true" href="redirect-30074.php"><img src="free.gif" alt="continue" /></a></td>

Answer 1

因为我看到一个onchange函数并且没有形式我会假设你使用javascript

我个人在处理javascript时使用jQuery，所以在我的awnser中使用它，如果你不使用jquery。该方法仍应指向正确的方向。

给你的继续按钮一个id

$('#continue').click(function(){
    if( $('#select1').val() == "1" ){
    //male seeking female
        if( $('#select2').val() == "1b"){
        //casual in male seeking female
        window.location = "1/1b/page.html";
        }
    }
    if( $('#select1').val() == "2" ){
    //female seeking male
        if( $('#select2').val() == "1b"){
        //casual in female seeking male
        window.location = "2/1b/page.html";
        }
    }
});

并重复......希望有所帮助

Answer 2

你可以使用jQuery，例如

$(document).ready(function(){

$("#select2").change(function(){
var selA=$("#select1 option:selected").val();
var selB=$("#select2 option:selected").val();
document.location.href="http://your_url_here/"+selA+selB;

});

});

如果select2更改

，此代码将使用select选项中的值重定向到您的网址

Answer 3

你的html需要一个表单标签和一个提交按钮，该按钮指向一个决定该做什么的php页面。

让我们说你做到了，并调用了php页面decision.php。

在decision.php中，然后比较从表单中收到的值。

您会收到$ _POST或$ _GET变量中的信息，具体取决于您使用的html表单标记。

清理收到的变量，然后使用php case语句。

switch ($_POST['select1'].$_POST['select2']) {
    case "11b":
        $redirectLocation = "MaleseekingFemaleCasual.html";
    case "12b":
        $redirectLocation = "MaleseekingFemaleSerious.html";

等。

header ("Location: ".$redirectLocation);

希望它有所帮助。

Answer 4

您可以创建一个在用户点击第二个下拉列表中的项目时调用的javascript吗？

类似的东西：

<select onchange="MyFunc(this.options[this.selectedIndex].value)">
    <option value="">Choose a destination...</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
</select>

在函数中，您可以从第一个DropDown列表中获取值。

编辑：

在MyFunc函数中，只需检查第一个下拉列表的值，并将其与函数中作为参数的值进行比较。

var e = document.getElementById("select1");
var result = e.options[e.selectedIndex].text; 

//Or var result = e.options[e.selectedIndex].value;

然后您拥有这两个值并可以确定重定向用户的位置。

请参阅：Get selected value in dropdown list using JavaScript?

Answer 5

您需要通过客户端脚本来将用户重定向到某个位置。

将onchange事件添加到您的select2 ID。这类似于<select name="select2" id="select2" onchange="gotourl();">
现在，您可以轻松使用Clientside语言中的自定义功能。代码将从您的第一个下拉列表中获取值，生成URL并重定向。代码将是这样的：

function gotourl() { var choice_one = $('#select1').val(); var choice_two = $('#select2').val(); // MVC based side pattern window.location = "mywebsitename.com/".choice_one.'/'.choice_two; // CUSTOM PAGES BASED SITE. switch(choice_two) { case 'Casual': switch(choice_one) { case 'Male seeking Female': window.location = "mywebsitename.com/".choice_one.'/'.choice_two; break; //ANOTHER CASE FROM BELOW.... } break; // ANOTHER CASE from .. } }

我尝试了很多，但代码没有进入{}块。从编辑器中试用此代码。

Answer 6

请以以下代码为例

<html>

<head>


<script>
 function openPage(){
 var a=document.getElementById("drop1").value;
 var b=document.getElementById("drop2").value;

   if (a==1 && b==1){

   window.location.href = "a.html";
   }
   if (a==1 && b==2){
   window.location.href = "b.html";
   }

   }

   </script>
</head>

<body>

 <select name="dropdown" id="drop1">
    <option value="1">Diesel</option>
    <option value="2">Gas petrol</option>
 </select>

<select name="dropdown" id="drop2">
    <option value="1">Auto</option>
    <option value="2">Heavy Duty trucks</option>
    <option value="3">light Duty trucks</option>
</select>

<button onclick="openPage()">Search</button>
</body>
</html>

基于php下拉表单重定向

6 个答案: