带选择选项的开关盒答案

【问题标题】：Switch case with Select Option带选择选项的开关盒
【发布时间】：2013-05-13 03:57:27
【问题描述】：

我在使用 Select 选项的值设置 Switch Case 时遇到问题，这是我正在使用的代码：

<form id="selectcub" name="selectcub">
    <select id="cub01" name="cub01" class="cub">
        <option value="2013" selected>2013</option>
        <option value="2012">2012</option>
        <option value="2011">2011</option>
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
        <option value="2007">2007</option>
    </select>
                   
    <select id="cub02" name="cub02" class="cub">
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03" selected>03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
                    
    <a id="cubdl" href="#" class="button">Open</a>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        switch($('#cub02 option:selected').val()) {
            case 01:
                alert("I am an alert box! 1");
            break;
            case 02:
                alert("I am an alert box! 2");
            break;
            default:
                //
        }
    });
</script>

我做错了什么？这是一个现场演示：https://jsfiddle.net/whC97/

【问题讨论】：

你想做什么？

标签： javascript jquery switch-statement

【解决方案1】：

val() 总是会返回一个字符串。尝试在您的 switch 语句中添加“01”、“02”等。

【讨论】：

或 parseInt($('#cub02 option:selected').val(), 10)（但即便如此，前导零也会被剥离，因此使用字符串更容易）。
+1 val 不仅会返回一个字符串，而且switch 使用=== 比较大小写（按顺序），因此没有类型强制。

【解决方案2】：

试试这个 -

演示-->http://jsfiddle.net/whC97/5/

$(document).ready(function () {
    switch (parseInt($('#cub02').val())) {
        case 1:
            console.log("I am an alert box! 1");
            break;
        case 2:
            console.log("I am an alert box! 2");
            break;
        default:

    }
});

【讨论】：

你应该设置基数，因为这里的数字从 0 开始： parseInt($('#cub02').val(),10)

【解决方案3】：

问题是您绑定到$(document).ready()，而不是点击您的链接。因此，javascript 正在检查加载时的值，该值为 03，您没有任何 case。

如果您更改在 01 上选择的默认值并将案例放在引号中，您可以看到它可以正常工作。

【讨论】：

不知道为什么这被否决了，因为它在技术上是正确的，在页面加载时，所选选项确实具有“03”作为值，并且该开关仅适用于页面加载。
真的很好，非常感谢，也很抱歉延迟回复，我最近太忙了 =/ 将案例放在引号中，并将函数设为 "$("#cub02").change (function(){" 而不是 "$(document).ready()"。非常感谢你，很抱歉这个愚蠢的问题。
没有愚蠢的问题。也许您也想使用self executing anonymous function

【解决方案4】：

两件事：一：如前所述，val() 返回一个字符串，所以你必须使用例如'01'。二：当 dom 准备好时，该函数会被正确调用，因此只有在您查找代码中选择的“03”时才会发出警报。您可能正在寻找事件监听器...

$(document).ready(function () {
    $('#cub02').on('change', function(){
        switch($('#cub02 option:selected').val()) {
            case '01':
                alert("I am an alert box! 1");
            break;
            case '02':
                alert("I am an alert box! 2");
            break;
        }
    });
});

还有小提琴： http://jsfiddle.net/whC97/11/

【讨论】：

【解决方案5】：

您正在尝试使用字符串表示，您应该使用 parseInt(val) 或切换 case 语句以使用带引号的字符串版本的数字

http://jsfiddle.net/whC97/9/

提供的修改示例：

$(document).ready(function(){
                    var val = $('#cub02').val();
                    switch(parseInt(val)) {
                    case 01:
                        alert("I am an alert box! 1");
                    break;
                    case 02:
                        alert("I am an alert box! 2");
                    break;
                    default:
                    //
                }
            });

【讨论】：