JSFiddle - React, Tailwind, and code Playground
by Andrey K
HTML
<select id="options">
<option selected="selected">Action</option>
<option>Create Subset</option>
<option>Goto</option>
<option>End</option>
</select>
<br>
<br>
<br>
<button style="display: none" id="MyPopupClose">Close</button>
<button style="display: none" id="MyPopupOK">OK</button>
JavaScript
var previous = ["Action"]; // Initially selected option
$(document).ready(function(){
$('#options').on('change', function(){
$('#MyPopupClose, #MyPopupOK').show();
if(previous[1] === $(this).find('option:selected').text()) {
console.log(previous);
return ;
}
previous.push($(this).find('option:selected').text()); // Tracking options selected
if (previous.length > 2) previous.splice(0, 1); // Removing first array element
console.log(previous);
});
$('#MyPopupClose').click(function(){
$('#MyPopupClose, #MyPopupOK').hide();
var change = previous[0];
previous.pop();
console.log(previous);
$('option:contains("' + change + '")').prop('selected', true); // Changing option to previously selected option
});
$('#MyPopupOK').click(function(){
$('#MyPopupClose, #MyPopupOK').hide();
console.log(previous);
});
});
$(document).keyup(function(event){
if (event.keyCode == 27 && $('#MyPopupClose').is(':visible')) {
$('#MyPopupClose').click(); // On Escape clicking close button
}
});