多个 select get Selected options in order to selected

Question

我有多个 select 如下

<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);


 
});

但是，在哪个选项中，我 select 项目最终总是按照它们在多个 select 中的顺序排列，例如通过选择沃尔沃、奥迪、萨博的值以该顺序产生以下数组

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

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

Answer 1

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

 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>