HTML双select下拉菜单使用JavaScript switch实现联动交互报错求助

现存问题列表 #

• 索引变量取值时机错误：你声明i的时候是页面初始化阶段读取的英制下拉选中索引，后续用户切换下拉选项时i的值不会自动更新，永远是页面刚加载时的初始值
• switch语法错误：switch (i); 末尾多写了分号，会直接终止switch语句逻辑，后面的大括号代码块和switch完全脱离，不会触发case匹配
• 公制选中项判断逻辑冗余：不需要通过getElementsByTagName("option")[索引].selected判断，直接读取select元素的value属性即可拿到选中项的value值，代码更简洁易扩展

修正后的完整JS代码 #

function press() {
    // 每次点击按钮时实时读取最新选中值
    const metricSelected = document.getElementById("metric").value;
    const imperialSelectedIndex = document.getElementById("imperial").selectedIndex;
    const outputEl = document.getElementById("aaa1");

    if (metricSelected === "kilometers") {
        // 去掉switch后的分号，使用实时读取的索引
        switch (imperialSelectedIndex) {
            case 0:
                outputEl.innerHTML = "0";
                break;
            case 1:
                outputEl.innerHTML = "1";
                break;
            case 2:
                outputEl.innerHTML = "2";
                break;
            case 3:
                outputEl.innerHTML = "3";
                break;
            default:
                outputEl.innerHTML = "default";
        }
    }
    // 后续其他公制单位判断直接按上面结构扩展即可，比如：
    // else if (metricSelected === "meters") {
    //    switch (imperialSelectedIndex) {
    //        对应逻辑
    //    }
    // }
}

更优实现方案（可选） #

如果你后续要维护所有两两组合的逻辑，用对象映射会比多层if+switch更简洁，后续加单位也不用嵌套判断：

// 预先定义所有组合对应的输出规则
const unitMap = {
    kilometers: {
        miles: "1公里=0.6214英里",
        yards: "1公里=1093.61码",
        feet: "1公里=3280.84英尺",
        inches: "1公里=39370.1英寸"
    },
    meters: {
        miles: "1米=0.0006214英里",
        yards: "1米=1.0936码",
        feet: "1米=3.2808英尺",
        inches: "1米=39.3701英寸"
    }
    // 其他公制单位规则继续补充即可
}

function press() {
    const metricVal = document.getElementById("metric").value;
    const imperialVal = document.getElementById("imperial").value;
    document.getElementById("aaa1").innerHTML = unitMap[metricVal][imperialVal] || "未匹配到对应规则";
}

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