一、为什么switch语句会总是显示最后一个选项的内容？ #

这是因为switch语句的贯穿（fall-through）特性，这是它的设计逻辑哦：
当switch匹配到第一个符合条件的case后，会从这个case开始，依次执行后续所有case里的代码，直到遇到break语句或者整个switch代码块结束。

比如你选中了选项a，代码会先执行case 'a'里的内容，但因为没有加break，它会继续往下跑，执行case b、c、d、e的代码，最后demo的内容会被最后一个case（e）的内容覆盖，所以你看到的永远是最后一个选项的文本。

而if/else是互斥判断，只要满足其中一个if条件，就会跳过后面所有的else if，不会出现这种“一路往下执行”的情况，所以能正常工作。

二、更简洁的实现方式（完全不用分支判断！） #

其实你的需求完全可以不用写一堆if/else或者switch，因为你已经用了Map来存对应文本，直接利用值的映射关系就能搞定，代码会简洁很多：

function on_change(el) {
  // 直接用传入的el（就是当前select元素）拿选中值，不用重复获取DOM
  const selectedVal = el.value;
  const demoEl = document.getElementById('demo');
  
  if (selectedVal !== 'None') {
    // 直接通过选中值从Map里取对应文本
    demoEl.innerHTML = options_summaries.get(selectedVal);
  } else {
    // 选默认选项时清空内容，可选
    demoEl.innerHTML = '';
  }
}

这种写法的好处：

• 不管你后续加多少个选项，代码都不用修改，扩展性拉满
• 避免了大量重复的DOM查询和分支判断，代码更简洁易维护
• 利用了传入的el参数，不用每次都通过getElementById重新获取select元素，效率更高

三、如果一定要用switch的正确写法 #

要是你还是想用switch，记得在每个case的代码末尾加上break，终止后续代码的执行：

function on_change(el) {
  const selectedVal = el.value;
  const demoEl = document.getElementById('demo');
  
  switch (selectedVal) {
    case 'a':
      demoEl.innerHTML = options_summaries.get('a');
      break; // 加break阻止贯穿
    case 'b':
      demoEl.innerHTML = options_summaries.get('b');
      break;
    case 'c':
      demoEl.innerHTML = options_summaries.get('c');
      break;
    case 'd':
      demoEl.innerHTML = options_summaries.get('d');
      break;
    case 'e':
      demoEl.innerHTML = options_summaries.get('e');
      break;
    default:
      demoEl.innerHTML = ''; // 默认情况处理
  }
}

这样每个case执行完就会跳出switch，不会再执行后面的case内容，就能正常工作啦~