Javascript 多次单击后的多选元素标识

我已经选择了具有多个选项的元素框

A
B
C
D

它还具有“多个”属性，允许用户一次选择多个选项（ctrl+单击）。 目前我正在使用

var example= document.getElementById('selectedboxid');

返回所选元素id（我需要什么！）。 我面临的问题是——如果用户想要选择多个元素，getElementById将返回相同的id（第一个被单击的那个！）。我需要在每次单击时返回新单击的元素id（一次选择多个元素）。如何做到这一点

代码如下所示：

    var example = document.getElementById('select_example');

    select_example.addEventListener('change', function() {
        var elementID = select_example.value;     // Element ID stays the same...
          ...
        }
    });

---

您可以这样做：

var selectedOptions = document.querySelectorAll('#select_example option:checked')

这将返回所有选定选项元素的节点列表

var selectedValues = Array.prototype.map.call(selectedOptions, function(el){return el.value})

---

这将把所选选项元素的数组映射到所选值的数组。

使用

selectedOptions

属性。例如：

<select id="myselect" multiple="multiple">
<option value="0">0-0-0-0-0-0</option>
<option value="1">1-1-1-1-1-1</option>
<option value="2">2-2-2-2-2-2</option>
<option value="3">3-3-3-3-3-3</option>
<option value="4">4-4-4-4-4-4</option>
</select>

var select = document.getElementById('myselect');

function processChange(event) {
    var selectElement = event.target;
    console.log(selectElement.selectedOptions);
}

select.addEventListener('change', processChange);

0-0-0-0-0-0
1-1-1-1-1-1
2-2-2-2-2-2
3-3-3-3-3-3
4-4-4-4-4-4
var select=document.getElementById（'myselect'）；
函数processChange（事件）{
var selectElement=event.target；
console.log（selectElement.selectedOptions）；
}
select.addEventListener（'change'，processChange）；

---

工作示例：

这应该适用于单击最后一个并获取完整列表

var sel=document.getElementById（'sel'）；
//全部选中
sel.addEventListener（'change'，function（）{
console.log（这是选择的选项）；
});
//点击那个
sel.addEventListener（'click'，函数（evt）{
console.log（evt.target）；
});
选择{
宽度：200px；
高度：200px；
}

1.
2.
3.
4.
@EvanKnowles您提到的主题的答案是获取“所有”值（选中）。我只需要点击最后一个。有什么简单/优雅的方法可以做到这一点吗？我也在使用纯JavaScript。这正是我想要的！谢谢。很高兴我能帮上忙。