Question

我有以下 HTML ：

<select id="rankBox">
    <option value="0">100</option>
    <option value="1">150</option>
    <option value="2">200</option>
    <option value="3">250</option>
    <option value="4">300</option>
    <option value="5">350</option>
    <option value="6">400</option>
</select>

<input type="Submit" id="button1" value="Generate" onclick="doStuff()">

以及 Javascript ：

function doStuff() {
    var choice = $("#rankBox option:selected").val();
    console.log(choice);
    switch (choice) {
        case 0:
        case 1:
            colorQ = "^7";
            break;
        case 2:
            colorQ = "^L";
            break;
        case 3:
            colorQ = "^A";
            break;
        case 4:
            colorQ = "^8";
            break;
        case 5:
            colorQ = "^+";
            break;
        case 6:
            colorQ = "^<";
            break;
        default:
            alert("Something went wrong");
            break;
    }
    alert(colorQ);
}

简而言之，我有一个switch语句，它应该检查用户选择的选项的值。正如您所看到的，我已添加console.log以查看问题是否与获取用户的输入有关，但这不是问题。问题是switch语句，它只是不起作用。我使用了错误的语法或其他东西吗？

jsFiddle：http://jsfiddle.net/3qTHW/2/（jsFiddle在我的浏览器中根本不起作用，说doStuff（）没有定义）

提前致谢。

Answer 1

它是不是一个整数，它是一个字符串，因为元素中的所有值都是字符串。

您必须将其解析为整数：

function doStuff() {
    var choice = parseInt( $("#rankBox option:selected").val(), 10);

      ....etc

或将开关更改为使用字符串（您应该修剪）

switch ( $.trim(choice) ) {
    case '0':
    case '1':

     ....etc

Answer 2

这是一个简单的问题，通过查看代码可以看到行var choice = $("#rankBox option:selected").val();正在向变量选择添加字符串。这就是没有案例陈述有效并且执行默认代码的原因。

不遇到此类问题的最佳方法是正确“调试”您的JavaScript代码。这将为您节省大量宝贵时间，您将自己找到每个问题的根本原因。

要调试代码，可以在Firefox中使用Firebug扩展。这实际上将停止代码执行，并逐行指导您告诉您每行代码中每个变量的状态。因此，如果您遇到问题，我所做的就是在.html文件中添加您的代码，并在Firefox中运行它并指定“Debugger”点。 JS代码看起来像这样。

function doStuff() {
    var choice = $("#rankBox option:selected").val();
    debugger; // This is the point where the debugging starts

       console.log(choice); // console.log wont help as it did not tell me the type
    switch (choice) { // Here Firebug tells me that choice is actually a string
        case 0:
        case 1:
            colorQ = "^7";
            break;
        case 2:
            colorQ = "^L";
            break;
        case 3:
            colorQ = "^A";
            break;
        case 4:
            colorQ = "^8";
            break;
        case 5:
            colorQ = "^+";
            break;
        case 6:
            colorQ = "^<";
            break;
        default:
            alert("Something went wrong");
            break;
    }
    alert(colorQ);
}

注意我在console.log（）上面放了一个“调试器”。从这一点开始，代码停在每一行，我可以看到每个变量中的值。这有助于我选择字符串值。

快乐调试：）

Answer 3

使用这样的javascript parseInt（）方法：

var choice = parseInt（$（“＃rankBox option：selected”）。val（））;

Javascript开关无法使用<option>标记值</option>

3 个答案: