Unexpected behavior of switch compared to if/else

I've come across something I do not understand while learning JavaScript; let's say I have the following HTML:

<select name="options" id="options" onchange='on_change(this)'>
  <option value="None">Pick an option</option>
  <option value="a">Choice A</option>
  <option value="b">Choice B</option>
  <option value="c">Choice C</option>
  <option value="d">Choice D</option>
  <option value="e">Choice E</option>
</select> 

<p id="demo"></p>

I am doing an exercise where some text must appear in <p id="demo"></p>, depending on the option selected. It works with the following JavaScript (written in an HTML <script></script>):

function on_change(el){
    if (document.getElementById('options').value == 'a') { 
        document.getElementById('demo').innerHTML = options_summaries.get('a');
    } else if (document.getElementById('options').value == 'b') {
        document.getElementById('demo').innerHTML = options_summaries.get('b');
    } else if (document.getElementById('options').value == 'c') {
        document.getElementById('demo').innerHTML = options_summaries.get('c');
    } else if (document.getElementById('options').value == 'd') {
        document.getElementById('demo').innerHTML = options_summaries.get('d');
    } else if (document.getElementById('options').value == 'e') {
        document.getElementById('demo').innerHTML = options_summaries.get('e');
    } 
}

But it doesn't work when doing the same with a switch statement (which I prefer because it's much more readable):

function on_change(el){
    switch (document.getElementById('options').value) {
        case 'a':
            document.getElementById('demo').innerHTML = options_summaries.get('a');
        case 'b' :
            document.getElementById('demo').innerHTML = options_summaries.get('b');
        case 'c':
            document.getElementById('demo').innerHTML = options_summaries.get('c');
        case 'd':
            document.getElementById('demo').innerHTML = options_summaries.get('d');
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get('e');            
    }
}

With the switch statement, the text is always the one of the last option of the last case (here 'e'), and apparently it's a feature (see here) , and if I add break statements all over it works, but I do not understand why all the cases are parsed without them, can someone explain? Is there any cleaner way to do?

Each case in a switch statement needs a break;, otherwise it will "fall through" to the next case statement until there's a break, or in your case to the last one.

This is so you can execute more than one line in a case statement if you want, or intentionally group case statements together and execute the same code for several.

See documentation: MDN - JavaScript - Switch

function on_change(el){
    switch (document.getElementById('options').value) {
        case 'a':
            document.getElementById('demo').innerHTML = options_summaries.get('a');
            break;
        case 'b' :
            document.getElementById('demo').innerHTML = options_summaries.get('b');
            break;
        case 'c':
            document.getElementById('demo').innerHTML = options_summaries.get('c');
            break;
        case 'd':
            document.getElementById('demo').innerHTML = options_summaries.get('d');
            break;
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get('e');
            break;
    }
}

As an alternative, you could have also made this, demonstrating how break; is optional.

function on_change(el){
    let choice = document.getElementById('options').value;
    switch (choice) {
        case 'a':
        case 'b':
        case 'c':
        case 'd':
        case 'e':
            document.getElementById('demo').innerHTML = options_summaries.get(choice);
            break;
    }
}

Check the MDN documentation link above for more information about switch/case.

To avoid this accident in the future, it helps to have a default: case for everything you haven't implemented. You could make it do console.log('Unknown case executed.') to help debug. The default case could also be literally the default, making above code even shorter. As an example:

function on_change(el){
    let choice = document.getElementById('options').value;
    switch (choice) {
        default:
            document.getElementById('demo').innerHTML = options_summaries.get(choice);
            break;
        case 'z':
            console.log('Z reached. Abandon ship!');
            break;
    }
}