Question

我正在尝试创建一个带有两个下拉菜单的表单，用户需要选择这些菜单，他们将提交这些菜单，并根据从两个下拉菜单中选择它们将被重定向到网页，我已经管理过用if语句创建一些东西，但我正在尝试使用更简洁的方法。我尝试使用案例陈述，但无法使其发挥作用。

请记住，我仍然是绿色的JavaScript

这是我到目前为止所做的事情：

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

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

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

<script type="text/javascript">

function goToPage()
{
  var type = document.getElementById("type").value;
  var height = document.getElementById("height").value;

  switch ("type" && "height"){

    case type == 1 && height == 1 :

    window.location = "http://www.maltabmx.com/About.html"
    Break;

    case type == 1 && height == 2 :

    window.location = "http://www.maltabmx.com/Footage.html"
    Break;



  }
}
</script>

Answer 1

您的switch语句有点偏离 - 用法如下：

switch (type){

  case "1":

    window.location = "http://www.maltabmx.com/About.html"
    break;

  case "2" :

    window.location = "http://www.maltabmx.com/Footage.html"
    break;
}

您要在switch（）语句中的表达式值之间进行选择。所以说我switch(height)每个'case'语句都需要是'height'变量的可能值，例如case "20":。

当您尝试使用多个条件做出逻辑决策时，请使用“if / else if”语句，因此我建议您这样做：

if(type == "1" && height == "1"){

   window.location = "http://www.maltabmx.com/About.html"
}
else if(type == "1" && height == "2"){

   window.location = "http://www.maltabmx.com/Footage.html"
}

而不是开关。我希望这会有所帮助。

Answer 2

使用switch和case：

会导致错误

switch用于评估单个表达式，并且每个case都需要考虑所分析表达式的结果。

由于您正在查看两个变量，if / else if可能会更清晰：

if (type==1 && height==1) { window.location = "http://www.maltabmx.com/About.html"; }
else if (type==1 && height==2) { window.location = "http://www.maltabmx.com/Footage.html"; }

那就是说，如果你仍然想使用switch，你可以，但你必须在另一个中嵌套。我不推荐这个，因为它过于冗长，但在这里包含一个例子来帮助您理解您的选择。

switch (type) {
    case 1:
        switch (height) {
            case 1:
                window.location = "http://www.maltabmx.com/About.html";
            break;
            case 2:
                window.location = "http://www.maltabmx.com/Footage.html";
            break;
        }
    break;
    // other options...
    default:
        alert("You must select a type.");
    break;
}

阅读回复评论后添加以下内容：

由于您有这么多组合，因此您可以使用if / else if / else和switch语句的组合来组织它们。由于存在大量链接，它仍然是一大块代码，但它至少看起来会更清晰。

var targetURL;
if (type==0) {
    switch (height) {
        case 1: targetURL = "http://www.maltabmx.com/About.html";
        case 2: targetURL = "http://www.maltabmx.com/Footage.html";
        /* and so on... */
    }
} else if (type==1) {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
} else if (type==2) {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
} else {
    switch (height) {
        case 1: targetURL = "...";
        case 2: targetURL = "...";
        /* etc... */
    }
}
targetURL ? window.location.href = targetURL : alert("Please choose a height.");

既然你提到你仍然是绿色的javascript，我将继续解释我添加的示例代码的其他几个部分。如果我查看你已经知道的事情我很抱歉。

在您的HTML中，看起来类型总是会有一个值，所以我只使用if而不是else if / else if (type==3)块，而不是结束else / if块。如果type不是0,1或2，那么它必须是3.通常使用else (if) / else语句在最后都有一个包罗万象的好习惯，所以你的脚本总是做一些事情即使结尾switch只是说出了问题。这样，用户不会坐在那里想知道是否应该发生某些事情。您可以在default语句中通过在案例后指定targetURL来执行相同操作。

我还使用了一个名为window.location的变量，而不是在使用case的每一行使用var targetURL;。如果初始化变量没有像我这样的值（“false”），则值变为false。在脚本的最后，我有一些简洁的代码来评估targetURL是否为真。如果不是这样，它会显示警报以选择高度。在javascript中，只要变量的值不是0或var targetURL = "false";，变量就会返回true。

（请注意，布尔值为false，而不是字符串“false”;带引号的window.location将返回true！）

我这样做了，所以你不必输入height 40次，并且可以在一个地方而不是四个地处理错误处理（如果targetURL ? window.location.href = targetURL : alert("Please choose a height.");某种程度上没有值）。< / p>

就此而言，只是为了让您熟悉我刚刚讨论的简洁语法：

if (targetURL) {
    window.location.href = targetURL;
} else {
    alert("Please choose a height.");
}

......相当于：

if

您可以通过这种方式简化else / {{1}}评估。

希望这有帮助！

提交两个变量并重定向到网页的表单

2 个答案: