为什么我的switch语句运行多个案例？

Question

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();
            }

});

Answer 1

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

Answer 2

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