如何让选择器切换选项后switch语句正常生效？

看起来你碰到了一个很常见的前端小问题——select选择器的switch判断逻辑只在默认值时生效，手动切换选项后毫无反应对吧？我来帮你理清楚问题根源，再确认你找到的解决方案是否完善。

问题描述 #

你有一个包含4个选项的select选择器，默认选项的value="11"没有纳入后续的switch语句判断中。当选择value="1"的选项时，页面没有任何反应；但如果把value="1"的选项设为默认值，switch语句就能正常工作并显示对应的文本。

你的代码如下：

HTML代码

<select id="select-forma"> 
  <option value="11">-Alegeti Forma-</option> 
  <option value="1">Forma 1</option> 
  <option value="2">Forma 2</option> 
  <option value="3">Forma 3</option> 
</select><br> 
<h1 id="mp">Aveti nevoie de <span id="mpv">100</span> m2 folie</h1><br>

初始JS代码

switch(parseInt(document.getElementById('select-forma').value)){ 
  case 1: 
    document.getElementById('mp').style.display = 'block'; 
    break; 
}

问题根源 #

这段switch代码只会在页面首次加载完成时执行一次，所以只有默认选中的选项能触发对应的逻辑。当你后续手动切换select的选项时，代码不会自动重新执行，自然就看不到任何反应了。

解决方案（你已自行解决的正确方法） #

把switch逻辑封装成一个独立函数，然后给select选择器添加onchange事件，让每次选项变化时都调用这个函数。这样就能保证每次切换选项时，都会重新获取当前选中的值并执行判断逻辑。

具体代码修改如下：

修改后的HTML

<select id="select-forma" onchange="updateMpDisplay()"> 
  <option value="11">-Alegeti Forma-</option> 
  <option value="1">Forma 1</option> 
  <option value="2">Forma 2</option> 
  <option value="3">Forma 3</option> 
</select><br> 
<h1 id="mp">Aveti nevoie de <span id="mpv">100</span> m2 folie</h1><br>

对应的JavaScript函数

function updateMpDisplay() {
  const selectValue = parseInt(document.getElementById('select-forma').value);
  switch(selectValue){ 
    case 1: 
      document.getElementById('mp').style.display = 'block'; 
      break;
    case 2:
      // 可以在这里添加Forma 2对应的逻辑，比如修改mpv的数值
      document.getElementById('mpv').textContent = '150';
      document.getElementById('mp').style.display = 'block';
      break;
    case 3:
      // Forma 3的逻辑
      document.getElementById('mpv').textContent = '200';
      document.getElementById('mp').style.display = 'block';
      break;
    default:
      // 处理默认选项（value=11）的情况，比如隐藏文本
      document.getElementById('mp').style.display = 'none';
      break;
  }
}

// 可选：页面加载时执行一次，确保初始状态符合预期
updateMpDisplay();

这样调整后，每次切换select选项时，函数都会重新运行switch判断，就能正常触发对应的显示或修改效果了。

内容的提问来源于stack exchange，提问作者Vladut Maican