element级联选择器多选change如何判断新增还是移除

Element级联选择器在JavaScript中通常用于处理多选列表或多级下拉菜单等场景，当用户改变选项时，我们可以通过监听`change`事件来判断是新增了一个选项还是删除了一个选项。这里有一个简单的例子：

// 假设我们有这样一个多选列表
const multiSelect = document.getElementById('multi-select');

multiSelect.addEventListener('change', function(event) {
    const selectedOptions = event.target.selectedOptions; // 获取当前选中的option元素

    if (selectedOptions.length > oldSelectedOptionLength) { // 如果选中的选项比之前多
        console.log("新增了", selectedOptions[oldSelectedOptionLength].textContent, "这个选项");
        // 这里可以添加处理新增逻辑，例如更新状态或数据库
    } else if (selectedOptions.length < oldSelectedOptionLength) { // 如果选中的选项比之前少
        for (let i = oldSelectedOptionLength; i < selectedOptions.length; i++) {
            console.log("移除了", selectedOptions[i].textContent, "这个选项");
        }
        // 这里可以添加处理移除逻辑
    }

    oldSelectedOptionLength = selectedOptions.length; // 更新旧的选中选项数量
});

在这个例子中，我们需要先记录下之前的选中选项数量（`oldSelectedOptionLength`），然后每次事件触发时对比新旧数量，以此判断是新增还是移除。如果想获取具体的新增或移除的选项，就需要遍历`selectedOptions`。