JavaScript 表单选项处理：单选与多选的核心用法

JavaScript 表单选项处理：单选与多选的核心用法

在处理 Web 表单时，<select> 元素是最常见的交互组件之一。无论是单选还是多选场景，掌握如何准确获取和设置选中状态都是前端开发的基本功。

获取当前选中项

对于只允许选择一项的选择框，最简单直接的方式是利用 selectedIndex 属性。它返回当前被选中的选项在数组中的索引位置。

let selectedOption = selectbox.options[selectbox.selectedIndex];

拿到这个对象后，你可以轻松提取出索引、文本内容和对应的值：

let selectedIndex = selectbox.selectedIndex;
let selectedOption = selectbox.options[selectedIndex];
console.log(`Selected index: ${selectedIndex}\n` + 
            `Selected text: ${selectedOption.text}\n` + 
            `Selected value: ${selectedOption.value}`);

这段代码会打印出选中项的详细信息。不过要注意，如果用户没有选择任何选项，selectedIndex 可能会返回 -1，实际开发中最好做个非空判断。

多选场景下的特殊性

当选择框允许多选时，selectedIndex 的行为依然遵循'单选逻辑'——它只会返回第一个被选中的选项索引。如果你尝试通过设置 selectedIndex 来改变选择，它会移除所有其他选项，只保留你指定的那一个。这在多选场景下显然不符合预期。

动态控制选中状态

如果需要更灵活地控制选项，比如同时选中多个，或者取消某个特定选项，直接使用 selected 属性会更合适。

// 选中第一项
selectbox.options[0].selected = true;

这里有个关键区别：设置 selected 为 true 时，如果是多选框，不会清除其他已选项；但如果是单选框，浏览器会自动将其他选项设为未选中。反过来，把 selected 设为 false 对单选框通常没有额外影响，因为单选框本身只能保持一个选中态。

遍历所有选中项

既然 selectedIndex 在多选中不够用，我们怎么知道哪些选项被勾选了呢？最稳妥的办法是遍历整个选项集合，逐个检查 selected 属性。

我们可以封装一个辅助函数来处理这个逻辑：

function () {
     result =  ();
     ( option  selectbox.) {
         (option.) {
            result.(option);
        }
    }
     result;
}