如何檢查我是否連續兩次選擇了相同的下拉列表選項？

Question

假設我有一個簡單的下拉列表，我可以從中自由選擇我想要的任何選項。

我可以通過 JavaScript 以這種方式將所選選項的值存儲在變量中：

 var checkValue = function(){ const mySelect = document.getElementById("cars"); let currentValue = mySelect.options[ mySelect.selectedIndex ].value; console.log(currentValue); }

 <select id="cars" onchange="checkValue()"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

問題：

1. 如何檢查我是否連續兩次選擇了相同的下拉列表選項，換句話說， currentValue的值是否已更改？

2. 使用 AngularJS 會讓這個任務更容易嗎？ 如何？

Answer 1

您可能正在尋找 onclick 事件，然后檢查值是否相同：

 var checkValue = function(){ let mySelect = document.getElementById("cars").options; let currentValue = mySelect[ mySelect.selectedIndex ].value; if (currentValue === previousValue) { console.log("The same option was selected"); } else { console.log("Different option"); } previousValue = currentValue; } let select = document.getElementById("cars").options; let previousValue = select[select.selectedIndex].value;

 <select id="cars"> <option value="volvo" onclick="checkValue(this)">Volvo</option> <option value="saab" onclick="checkValue(this)">Saab</option> <option value="opel" onclick="checkValue(this)">Opel</option> <option value="audi" onclick="checkValue(this)">Audi</option> </select>

Answer 2

 var arr = []; var checkValue = function() { const mySelect = document.getElementById("cars"); let currentValue = mySelect.options[mySelect.selectedIndex].value; if ($.inArray(currentValue, arr) != "-1") { console.log("already selected"); } else { arr.push(currentValue); console.log(currentValue); } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <select id="cars" onchange="checkValue()"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

Answer 3

連續兩次在元素選擇上觸發事件的一個例子可能是添加點擊事件而不是更改事件，我在考慮MutationObserver但如果它已經選擇檢查這里，似乎在偵聽選項更改時不會觸發

 var activities = document.getElementById("activitySelector"); activities.addEventListener("click", function() { console.log('selected item'); });

 <select id="activitySelector"> <option value="addNew">Item</option> <option value="1">option 1</option> </select>

通過單擊事件，您可以執行以下操作：

 let selectedoptions = []; var clickListener = function(){ const mySelect = document.getElementById("cars"); let currentValue = mySelect.options[ mySelect.selectedIndex ].value; if(selectedoptions.indexOf(currentValue) < 0) { selectedoptions.push(currentValue); } else { console.log('selected before'); } //console.log(currentValue); }

 <select id="cars" onclick="clickListener()"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>