如何通过代码设置带multiple属性的select元素的选中值？

上下文 #

HTML 代码 #

<!--HTML-->
<select class="form-select mb-1" id="document-select" name="documents" multiple size="10">                                        
    <option class="document-option" value="1">20230308-seed-document-0</option>
    <option class="document-option" value="2">20230308-seed-document-1</option>
</select>

JavaScript 代码 #

// JS
const documentSelectEl = document.getElementById("document-select");
form.addEventListener("submit", (event) => {
    documentSelectEl.selectedIndex = -1;
    documentSelectEl.value = ["1", "2"];
    console.log(documentSelectEl.value); // Empty string
    documentSelectEl.value = "1,2";
    console.log(documentSelectEl.value); // Empty string
}

问题描述 #

我尝试在表单提交前设置带multiple属性的select元素的值，逻辑是先通过documentSelectEl.selectedIndex = -1重置所有选中项，再直接设置完整的选中值集合。

这么做是因为option列表是分页加载的，当前页面的option集合并不对应用户的完整选择项，我希望传递从sessionStorage中获取的完整选中值（不管是数组还是逗号分隔字符串形式）。

但两种方式都不起作用，调试时发现，即便select带multiple属性，它的值始终只显示单个值（对应最后一个选中的option）。是不是说，给带multiple属性的select设置值的唯一方式就是逐个设置对应option的选中状态？

解决方案 #

核心结论 #

没错，带multiple属性的<select>无法通过value属性直接设置多个选中值——不管传数组还是逗号分隔字符串都不行。select.value在多选模式下只会返回最后一个选中项的值，设置时也仅能生效单个值。

常规场景实现（当前页面存在对应option） #

如果当前页面加载了需要设置的option，你需要逐个修改option的selected属性：

const documentSelectEl = document.getElementById("document-select");
const targetValues = ["1", "2"]; // 从sessionStorage取到的完整选中值

form.addEventListener("submit", (event) => {
    // 先重置所有option的选中状态
    Array.from(documentSelectEl.options).forEach(option => {
        option.selected = false;
    });

    // 匹配目标值，设置对应option为选中
    Array.from(documentSelectEl.options).forEach(option => {
        if (targetValues.includes(option.value)) {
            option.selected = true;
        }
    });
});

分页场景的最优处理 #

既然你提到option是分页的，当前页面没有用户选中的全部option，那直接操作select的option无法传递完整选中值——因为表单默认只会提交当前页面中选中的option值。

更靠谱的方案是绕过原生select的提交行为，手动用隐藏输入框传递完整值：

// 从sessionStorage获取完整选中值
const fullSelectedValues = JSON.parse(sessionStorage.getItem("selectedDocuments"));

form.addEventListener("submit", (event) => {
    // 移除可能存在的旧隐藏输入
    const oldHidden = form.querySelector('input[name="documents"]');
    if (oldHidden) oldHidden.remove();

    // 创建隐藏输入框，赋值完整选中值
    const hiddenInput = document.createElement("input");
    hiddenInput.type = "hidden";
    hiddenInput.name = "documents";
    hiddenInput.value = fullSelectedValues.join(",");
    
    // 添加到表单，禁用原select避免干扰
    form.appendChild(hiddenInput);
    documentSelectEl.disabled = true;
});

这样不管当前页面加载了哪些option，表单提交的都是用户的完整选择集合。

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