JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<select id="dropdownlist">
    <option>Test Opt 1</option>
    <option>Test Opt 2</option>
    <option>Test Opt 3</option>
    <option>Test Opt 4</option>
    <option>Test Opt 5</option>
</select>

<div id="result" ></div>

CSS

#result { position: fixed; bottom: 0px; left: 0px; }

JavaScript

var optionChanged = 0;

$("#dropdownlist").change(function (event) {
    var selected = $(this).find(":selected");
    selected.attr('data-orig', selected.val());
    selected.text('foo');
    optionChanged = 1;
    $('#result').text($('#result').text() + ' change');
});

$("#dropdownlist").click (function () {     
    
    if (optionChanged == 2) {
        var selected = $(this).find(":selected");
        var tmp = selected.attr('data-orig');
        selected.attr('data-orig', selected.val());
        selected.text(tmp);       
    }
    optionChanged = 2;
    $('#result').text($('#result').text() + ' click');
});