如何在JS中保留多选字段关联的「其他说明」字段值

场景说明 #

多选字段选项如下：

需求 #

• 选中「其他」（编码OTH）时，显示「请指定（其他）」输入框，允许用户输入内容
• 选中包含「其他」的组合（如印度、其他、澳大利亚）时，需显示输入框并保留用户已输入的内容
• 若先选中「印度+其他」，移除「其他」后再次选中，输入框值需清空

当前问题 #

选中包含「其他」的多选项组合时，输入框值被清空

原代码 #

function showHideOthers() {
    var selectedValue = $("#field_id_ui").val();
    if (null !== selectedValue) {
        for (var i = 0; i < selectedValue.length; i++) {
            if (selectedValue[i] == "OTH") {
                $("#Others_section").show();
            } else {
                $("#Others_section").hide();
                $("#Others_section").val("");
            }
        }
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }
}

注：#field_id_ui返回选中值的数组，例如["AUS", "IN", "OTH"]

问题根源 #

原代码的循环逻辑错误：遍历选中值数组时，每遇到非OTH的选项就会执行隐藏输入框并清空值的操作。当选中多个选项（含OTH）时，循环会先处理OTH显示输入框，但后续处理其他选项时又会清空并隐藏，最终导致输入框内容丢失。同时，代码也没有处理「移除后重新选中需清空」的逻辑。

修复代码 #

// 记录上一次是否选中了「其他」
let lastOtherSelected = false;

function showHideOthers() {
    const selectedValues = $("#field_id_ui").val();
    const isOtherSelected = selectedValues?.includes("OTH");

    if (isOtherSelected) {
        // 若上一次没选中，这次是重新选中，清空输入框
        if (!lastOtherSelected) {
            $("#Others_section").val("");
        }
        $("#Others_section").show();
    } else {
        $("#Others_section").hide();
        $("#Others_section").val("");
    }

    // 更新上一次的选中状态
    lastOtherSelected = isOtherSelected || false;
}

逻辑解释 #

1. 用全局变量lastOtherSelected追踪上一次是否选中了「其他」，用来判断是否需要清空输入框
2. 直接用includes("OTH")判断选中数组里是否包含「其他」，避免循环带来的覆盖问题
3. 选中「其他」时：
   • 只有当之前没选中过（这次是重新选中），才清空输入框
   • 显示输入框，保留已有内容（仅首次重新选中时清空）
4. 未选中「其他」时：隐藏输入框并清空值
5. 每次执行完更新状态，为下一次判断做准备

这样既解决了多选项组合时输入框被清空的问题，也满足了「移除后再次选中需清空」的需求。

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