switch文が複数のケースを実行するのはなぜですか？

Question

私は、次の機能があります：SelectedValが2021のとき

$("#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'); 
    } 
} 

なぜ、それがa,b,a,b,cを印刷していますか？

jsfiddleにシナリオを作成しました。今私はあなたに私の質問を理解することができます。 2021を選択すると、2 divを返します。 switch文がfall-thoughtに基づいているのであれば、それでなぜEFGHを選択した場合、3つで1つのdivしか表示されないのでしょうか？

<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

あなたがbreak声明を持っていないためです。それがなければ、コードは「落ちる」でしょう。

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

時にはそれがフォールスルーするのに便利だから、これが存在する理由があります。ゲームの状態を更新している場合や、特定の種類の敵やすべての敵に対して何が起こるかを想像することができます。

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

それはフォールスルーを利用するために信じられないほど一般的ではないのですが、それはそのユースケースを持っています。誤字として閉じるように投票されたものと

$("#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 
    } 
} 

Answer 2

あなたはあなたの例ごとに、あなたのbreak;文が欠落しています

$("#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; 
    }