Bootstrap下拉框选值存入数组重复叠加问题求助

你的代码逻辑结合Bootstrap Select的特性导致了这个异常：

• Bootstrap Select组件在多选模式下，$(this).val()返回的是当前所有选中值组成的数组（比如单独选5时返回['5']，同时选5和6时返回['5','6']）。
• 你每次触发change事件时，都把这个数组直接push到destinationVal里，相当于往数组里添加了一个新的数组元素，而非更新或追加单个值。所以第一次操作后数组是[['5']]，第二次操作后就变成[['5'], ['5','6']]。

根据你的实际需求，提供两种处理方式：

需求1：保存当前所有选中的完整值集合 #

如果希望每次选中后，destinationVal只保留当前所有选中的值（而非历史操作记录），直接替换数组即可，把push改成赋值：

var destinationVal = []

$('.col-location .selectpicker').on('change', function () {
    var selectedVals = $(this).val();
    destinationVal = selectedVals || []; // 处理没有选中值的情况
    console.log(destinationVal)
});

需求2：记录每次新增的单个选中值 #

如果只想记录每次新选中的那个值（而非所有选中值），需要对比之前的选中状态，找出新增项：

var destinationVal = [];
var prevSelected = []; // 保存上一次的选中值

$('.col-location .selectpicker').on('change', function () {
    var selectedVals = $(this).val() || [];
    // 找出新增的选中值
    var newVals = selectedVals.filter(val => !prevSelected.includes(val));
    // 把新增值追加到数组
    destinationVal.push(...newVals);
    // 更新上一次选中记录
    prevSelected = [...selectedVals];
    console.log(destinationVal)
});

内容的提问来源于stack exchange，提问作者Brandon.b