多點擊後識別多元素元素

我選擇了具有多個選項的元素框。多點擊後識別多元素元素

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

來源

2017-02-16 Poo123

@EvanKnowles回答你提到的話題越來越 '所有' 值（選擇）。我只需要點擊最後一個。有一些簡單/優雅的方式來做到這一點？我也使用普通的JavaScript。 – Poo123

這應該適用於獲得最後一個點擊，還抓的完整列表。

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>

來源

2017-02-16 07:30:00 creativekinetix

正是我在找的東西！謝謝。 – Poo123

我很樂意幫忙。 – creativekinetix

YOUT能做到這樣的：

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

這將返回所有選中的選項元素的節點列表

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

這將映射的陣列選擇選項元素到選定值的數組。

來源

2017-02-16 07:27:48 Mako

使用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/

來源

2017-02-16 07:28:11

多點擊後識別多元素元素

回答

相關問題