多选 get Selected options 按顺序选择答案

【问题标题】：Multiple select get Selected options in order selected多选 get Selected options 按顺序选择
【发布时间】：2020-12-27 17:58:04
【问题描述】：

我有一个多重选择，如下所示

<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

我已经实现了选择的插件，我有一个 onchange 侦听器，可以像这样将选定的元素添加到数组中

$("#cars").change(function () {
 
    var selected = [];
    for (var option of document.getElementById('cars').options) {
        if (option.selected) {
            selected.push(option.value);
        }
    }
    console.log(selected);


 
});

但是，无论在哪个选项中，我选择的项目总是按照它们在多选中的顺序排列例如，通过按顺序选择值 Volvo、Audi、Saab 会产生以下数组

Array [ "Volvo" ]
Array [ "Volvo", "Audi" ]
Array(3) [ "Volvo", "Saab", "Audi" ]

有没有一种方法可以将多选中的元素按照选择的顺序添加到数组中？

【问题讨论】：

标签： javascript select

【解决方案1】：

selected 数组的顺序始终相同，因为每次运行 onChange 函数时都会创建它。所以解决方案是让它成为一个全局变量。当您这样做时，您的数组在第二个选择时不会为空，因此您必须注意从中删除项目。这是一些代码

 var selected = [];
$("#cars").change(function () {
    for (var option of document.getElementById('cars').options) {
            var value = option.value;
        if (option.selected) {
                if(selected.indexOf(value) < 0){//we only add element if it's not present in the array
                selected.push(value);
            }
        }else{
            if(selected.indexOf(value) >= 0){ //we only remove item if it is present
                selected.splice(selected.indexOf(value),1)
          }
        }
    }
    console.log(selected);


 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

【讨论】：