javascript - Why is my switch statement running multiple cases? - Stack Overflow

admin管理员组

文章数量:1391993

I have the following function:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
        case "2020":
            console.log('a');
        case "ADB":
            console.log('b');
        case "PWP":
            console.log('c');
    }
}

Why, when SelectedVal is 2021, is it printing a,b,a,b,c?

Created scenario in jsfiddle. Now i am able to understand you my question. When select 2021 it return 2 divs. and if switch statement base on fall-thought so why its happning that if select EFGH the only one div visible instead of 3?

<select id="drpQuotaType" >
  <option value="0">Select</option>
  <option value="2021">2021</option>
  <option value="2020">2020</option>
  <option value="ABCD">ABCD</option>
  <option value="EFGH">EFGH</option>
</select>

<div id="dv1" style="display:none">Div 1 </div></br>
<div id="dv2" style="display:none">Div 2 </div></br>
<div id="dv3" style="display:none">Div 3 </div></br>
<div id="dv4" style="display:none">Div 4 </div>


$("#drpQuotaType").change(function () {
            var SelectedVal = this.value;
            $('#dv1').hide();
            $('#dv2').hide();
            $('#dv3').hide();
            switch (SelectedVal) {
                case "2021":
                    $('#dv1').show();
                    $('#dv2').show();
                case "2020":
                    $('#dv2').show();
                case "ABCD":
                    $('#dv2').show();
                case "EFGH":
                    $('#dv3').show();
            }

});

I have the following function:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
        case "2020":
            console.log('a');
        case "ADB":
            console.log('b');
        case "PWP":
            console.log('c');
    }
}

Why, when SelectedVal is 2021, is it printing a,b,a,b,c?

Created scenario in jsfiddle. Now i am able to understand you my question. When select 2021 it return 2 divs. and if switch statement base on fall-thought so why its happning that if select EFGH the only one div visible instead of 3?

<select id="drpQuotaType" >
  <option value="0">Select</option>
  <option value="2021">2021</option>
  <option value="2020">2020</option>
  <option value="ABCD">ABCD</option>
  <option value="EFGH">EFGH</option>
</select>

<div id="dv1" style="display:none">Div 1 </div></br>
<div id="dv2" style="display:none">Div 2 </div></br>
<div id="dv3" style="display:none">Div 3 </div></br>
<div id="dv4" style="display:none">Div 4 </div>


$("#drpQuotaType").change(function () {
            var SelectedVal = this.value;
            $('#dv1').hide();
            $('#dv2').hide();
            $('#dv3').hide();
            switch (SelectedVal) {
                case "2021":
                    $('#dv1').show();
                    $('#dv2').show();
                case "2020":
                    $('#dv2').show();
                case "ABCD":
                    $('#dv2').show();
                case "EFGH":
                    $('#dv3').show();
            }

});

• javascript
• switch-statement

Share Improve this question Follow edited Apr 12, 2017 at 15:27 shaair asked Apr 12, 2017 at 14:19 shaairshaair 9851414 silver badges2828 bronze badges 4

• 5 To those voting to close as a typographical error: It's only a typographical error if OP understands what break statements are for. When starting out, it's reasonable to think that you don't need break statements. – Mike Cluck Commented Apr 12, 2017 at 14:25
• 1 @MikeC yes make sense.Why need to break after each case. – shaair Commented Apr 12, 2017 at 14:27
• 2 If you rated both answers down, I'm sorry to say but they're right. Also, I agree with Mike C Some languages "fall through" without a break, other languages function like an if statement, following the path of the first success. It can confuse a person crossing between 'conflicting' styles. – Regular Jo Commented Apr 12, 2017 at 14:28
• 1 This isn't a typographical error. This is not knowing how to correctly implement a switch statement. – Steve Commented Apr 12, 2017 at 15:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It's because you don't have a break statement. Without it, the code will "fall through".

var x = 10;
switch (x) {
  case 10:
    console.log('With break');
    break;
    
  case 20:
    console.log('I never run');
    break;
}

console.log('-------');

switch (x) {
  case 10:
    console.log('Without');
  case 20:
    console.log('a break');
  case 30:
    console.log('it just');
  case 40:
    console.log('keeps going');
}

The reason this exists is because sometimes it's useful to fall through. You could imagine a case where you're updating the state of a game and what stuff to happen for a specific kind of enemy as well as for all enemies.

var characterType = 'big boss';

switch (characterType) {
  case 'big boss':
    console.log('Update the big boss');
  
  case 'enemy':
    console.log('The big boss is also an enemy so run the basic enemy code');
    break;
    
  case 'player':
    console.log('The boss is not a player so we will not run this.');
    break;
}

It's not incredibly mon to utilize fall-through but it does have its use cases.

Finally, here's what your code should look like:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
            break; // <--

        case "2020":
            console.log('a');
            break; // <--

        case "ADB":
            console.log('b');
            break; // <--

        case "PWP":
            console.log('c');
            break; // optional. It's visually consistent but doesn't do anything
    }
}

You are missing your break; statements on each of your cases:

$("#drpType").change(function () {
    var SelectedVal = this.value;
    switch (SelectedVal) {
        case "2021":
            console.log('a');
            console.log('b');
            break;
        case "2020":
            console.log('a');
            break;
        case "ADB":
            console.log('b');
            break;
        case "PWP":
            console.log('c');
            break;
    }

本文标签： javascriptWhy is my switch statement running multiple casesStack Overflow