如何使用HTML、jQuery、JSON将数据表多值逗号分隔导出至Excel

问题根源 #

原代码的核心问题是通过filldatalist函数动态修改了datalist的option值，将已选内容作为前缀拼接进了新option的value属性，才导致下拉列表会展示带前缀的异常内容。

修改思路 #

完全不修改原始datalist的可选值，仅在用户选中新选项后，手动处理输入框的内容格式，自动用逗号拼接多值。既保证下拉列表永远展示原始的正常选项，又能让输入框的最终值是逗号分隔的格式，导出Excel时直接读取该值即可满足分隔需求。

调整后代码 #

// datalist多选支持 + 导出自动带逗号分隔
document.addEventListener("DOMContentLoaded", function () {
    const separator = ',';
    // 遍历所有带multiple属性的datalist绑定输入框
    for (const input of document.getElementsByTagName("input")) {
        if (!input.multiple || !(input.list instanceof HTMLDataListElement)) {
            continue;
        }
        // 缓存原始可选值，永远不修改datalist的原始选项
        const originOptions = Array.from(input.list.options).map(opt => opt.value);
        // 监听选中事件
        input.addEventListener("input", () => {
            const currentInputVal = input.value;
            // 匹配是否刚选中了一个原始可选值
            const selectedOpt = originOptions.find(opt => currentInputVal.endsWith(opt));
            if (selectedOpt) {
                // 拆分已选值，去重，过滤空值和不在可选范围内的值
                const usedVals = currentInputVal.split(separator)
                    .map(v => v.trim())
                    .filter(v => v && originOptions.includes(v));
                // 去重后重新用逗号+空格拼接，赋值给输入框
                input.value = [...new Set(usedVals)].join(`${separator} `);
                // 光标移到末尾方便继续选择
                input.setSelectionRange(input.value.length, input.value.length);
            }
        });
    }
});

效果说明 #

• datalist下拉列表永远展示原始的可选选项，不会出现带前缀的异常内容，符合交互预期
• 选中多个值后输入框自动用逗号拼接，导出Excel时直接读取该输入框的value值，即可得到带分隔的内容，不会出现无分隔拼接的问题
• 支持手动修改输入框内容，自动过滤无效值、去重

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