0

我正在尝试创建一个带有两个下拉菜单的表单，用户需要从中进行选择，他们将提交它们，并且根据从两个下拉菜单中的选择，他们将被重定向到网页，我已经设法做了一些事情使用 if 语句，但我正在尝试使用更清洁的方式来做这件事。我尝试使用 case 语句，但无法使其正常工作。

请记住我对 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>
4

2 回答 2

0

您的 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"
}

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

于 2012-07-12T19:20:30.773 回答
0

使用switchand时遇到一些问题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 中，看起来 type 总是有一个值，所以我不使用 来结束if/else if块else if (type==3)，而是使用，else因为如果 type 不是 0、1 或 2，它必须是 3。通常使用if/是一种很好的做法else (if)声明在结尾有一个包罗万象，所以你的脚本总是做一些事情，即使结尾else只是说出了点问题。这样用户就不会坐在那里想知道是否应该发生某些事情。您可以通过在您的案例之后switch指定 a 在语句中执行相同的操作。default

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

（请注意，这是布尔假而不是字符串“假”；var targetURL = "false";带引号将返回真！）

我这样做是为了您不必键入window.location40 次，并且可以将错误处理（如果height不知何故没有值）放在一个地方而不是四个地方。

在那张纸条上，只是为了让您熟悉我刚刚讨论过的简洁语法：

targetURL ? window.location.href = targetURL : alert("Please choose a height.");

...相当于：

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

您可以通过这种方式使简单if/else评估更加简洁。

希望这可以帮助！

于 2012-07-12T19:39:17.947 回答