JSFiddle - React, Tailwind, and code Playground

by sstur

HTML

<ul>
    <li><select><option>Two</option></select></li>
    <li><select><option>Three</option></select></li>
</ul>
<select id="sel">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
    <option>Four</option>
    <option>Five</option>
    <option>Six</option>
    <option>Seven</option>
    <option>Eight</option>
    <option>Nine</option>
    <option>Ten</option>
</select>

CSS

ul select {
    min-width: 140px;
}

JavaScript

var $sel = $('#sel').remove();
var $options = $sel.children().remove();
var $ul = $('ul');

$ul.on('mousedown', 'select', function() {
    var $self = $(this);
    var oldVal = $self.val();
    var $oldChild = $self.children().remove();
    $self.append($options);
    $self.val(oldVal);
    var reset = function() {
        var newVal = $self.val();
        $self.children().remove();
        $self.append($oldChild.text(newVal));
    };
    $self.one('change', reset);
});