如何检查我是否连续两次选择了相同的下拉列表选项？

Question

Let's supose I have a simple drop-down list from which I can freely select any option I want.

I can, via JavaScript, store the selected option's value in a variable this way:

 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>

Questions:

1. How can I check if I have selected the same drop-down list option twice in a row, in other words, if the value of currentValue has changed ?

2. Would using AngularJS make this task easier? How?

Answer 1

You might be looking for onclick event and then check whether the value is the same:

 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

An example of triggering event on element select twice in a row might be to add click event instead of change event, I was thinking about MutationObserver but it seems this one doesn't trigger when listening to options change if its already selected check here

 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>

with click event you can do this:

 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>