Question

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

A
B
C
D

它还有多个＆＃34;属性，允许用户一次选择多个选项（按住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...
          ...
        }
    });

Answer 1

Yout可以这样做：

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

这将返回所有选定选项元素的NodeList

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

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

Answer 2

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

工作示例：https://jsfiddle.net/a8nbj7rw/

Answer 3

这应该适用于点击最后一个并且还获取完整列表。

var sel = document.getElementById('sel');

// GEt all selected
sel.addEventListener('change',function() {
  
  console.log(this.selectedOptions);
  
});


// Get the one clicked
sel.addEventListener('click', function(evt) {
  console.log(evt.target);
});

select {
  width: 200px;
  height: 200px;
  }

<select id="sel" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

多次点击后多重选择元素识别

3 个答案: