如何使用JavaScript/jQuery将HTML Select标签值导出至文本文件？

你遇到的问题核心是：对于设置了multiple="multiple"的select元素，直接用.value只能获取第一个选中项的值，而不是所有选中的选项。下面我会给出原生JavaScript和jQuery两种解决方案，帮你把所有选中的值（或文本）导出到文本文件。

问题分析 #

你的原代码中var textToWrite = document.getElementById('mySelect').value;这一行是关键问题点——多选select的.value属性仅返回第一个选中选项的值，当没有选中项或需要全部选中项时，这就会导致导出的文件为空或不完整。另外原代码里的$('#sel1').val()看起来是个笔误，你的select id是mySelect，所以判断逻辑需要对应调整。

原生JavaScript解决方案 #

我们需要遍历select的所有选项，筛选出选中的，然后把它们的值（或文本）拼接成字符串：

function saveTextAsFile() {
    const selectElement = document.getElementById('mySelect');
    // 获取所有选中的选项，收集它们的值（如果需要文本就用option.text）
    const selectedValues = Array.from(selectElement.options)
        .filter(option => option.selected)
        .map(option => option.value); // 若要导出选项文本，替换为option.text

    if (selectedValues.length === 0) {
        alert('请先选择至少一个选项！');
        return;
    }

    // 把选中的值拼接成每行一个的格式，也可以用逗号分隔等自定义格式
    const textToWrite = selectedValues.join('\n');
    const textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
    const fileNameToSaveAs = "directive.txt";

    const downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
    // 兼容旧浏览器的处理
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

// 绑定按钮事件
const button = document.getElementById('save');
button.addEventListener('click', saveTextAsFile);
// 保留你原有的清空逻辑
button.addEventListener('click', doClear);

jQuery解决方案 #

如果你习惯用jQuery，也可以这样实现：

function saveTextAsFile() {
    const selectedValues = $('#mySelect option:selected').map(function() {
        return $(this).val(); // 替换为$(this).text()可导出选项显示文本
    }).get();

    if (selectedValues.length === 0) {
        alert('请先选择至少一个选项！');
        return;
    }

    const textToWrite = selectedValues.join('\n');
    const textFileAsBlob = new Blob([textToWrite], { type: 'text/plain' });
    const fileNameToSaveAs = "directive.txt";

    const downloadLink = $('<a></a>');
    downloadLink.attr('download', fileNameToSaveAs);
    downloadLink.attr('href', window.URL.createObjectURL(textFileAsBlob));
    downloadLink.hide();
    $('body').append(downloadLink);
    downloadLink[0].click();
    downloadLink.remove();
}

$('#save').on('click', saveTextAsFile);
$('#save').on('click', doClear);

额外说明 #

• 如果需要导出选项的显示文本而不是value属性值，只需要把代码中的option.value（原生）或$(this).val()（jQuery）替换为option.text或$(this).text()即可。
• 拼接格式可以自定义：比如用逗号分隔selectedValues.join(', ')，或者其他符合你需求的格式。
• 代码中添加了空选择的判断，避免导出空文件，同时给用户明确提示。

内容的提问来源于stack exchange，提问作者N.Omugs