JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<select id="fake">
</select><br />
<select id="real" size="5" multiple="multiple">
    <option>1</option>
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 
<p>qwe</p>
<div></div>

CSS

div {
    height: 600px;
}
#fake, #real {
    width: 200px;
}
#real {
  position: absolute;
  display: none;
  z-index: 100;  
}

JavaScript

$(function() {
    $("#real").css({
        "top": $("#fake").offset().top + $("#fake").outerHeight(),
        "left": $("#fake").offset.left
    });
    $("#fake").click(function() {
        $("#real").show().focus();
    });
    $("#real").mouseleave(function() {
        $("#real").hide();
    });
    $("#real").change(function() {
        //alert()
        if ($("#fake option").length != 0) {
            $("#fake option").html(""+$("#real").val());
        } else {
            $("#fake").append("<option>" + $("#real").val() + "</option>");
        }
    });
});