JSFiddle - React, Tailwind, and code Playground
HTML
<select>
<option selected>Selected</option>
<option>Not selected</option>
</select>
<div id="console"></div>
JavaScript
$(document).ready(function () {
var con = $('#console');
$('select').change(function () {
/* change also on already selected option */
con.append('- ' + $(this).val() + '<br/>');
}).change().bind('mousedown', function () {
if (!$(this).data('cloned')) $(this).data('cloned', $(this).clone().css({
position: 'absolute',
pointerEvents: 'none',
top: this.offsetTop,
left: this.offsetLeft,
margin: 0
}).appendTo('body'));
this.selectedIndex = -1;
}).blur(function(){
if ($(this).data('cloned')) {
this.value = $(this).data('cloned').val();
$(this).data('cloned').remove();
$(this).data('cloned', null);
}
});
});