JQuery onchange触发default分支，动态加载内容异常求助

你的代码核心问题是switch语句的case分支缺少break关键字。JavaScript的switch是"贯穿式"执行逻辑，匹配到对应case后会继续执行后续所有分支，直到遇到break或者switch块结束。所以不管你选"pl"还是"en"，执行完对应load操作后都会继续走到default分支触发alert，甚至选"pl"时还会额外执行"en"的load操作，导致内容被覆盖。

修正后的代码如下：

$(document).ready(function () {
    $("#lang").on("change", function () {
        switch(this.value) {
            case "pl":
                $("#content").load("pl.html");
                break; // 添加break终止当前分支执行
            case "en":
                $("#content").load("en.html");
                break; // 添加break终止当前分支执行
            default:
                alert("default");
        }
    });
});

HTML部分无需修改：

<select name="lang" id="lang">
    <option value="en">en</option>
    <option value="pl">pl</option>
</select>
<div id="content"></div>

额外补充两个实用提示：

• 如果你的下拉选项只有"en"和"pl"，default分支可以直接去掉，避免不必要的弹窗干扰
• 可以给load方法添加错误回调，方便排查HTML文件加载失败的情况，示例：

  $("#content").load("pl.html", function(response, status, xhr) {
      if(status === "error") {
          console.log("加载失败: " + xhr.status + " " + xhr.statusText);
      }
  });
  

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