JSFiddle - React, Tailwind, and code Playground

by stodolaj

HTML

<div>
    <button>Drop 'em down!</button>
</div>
<select id="testA">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option selected="selected">4</option>
    <option>5</option>
</select>
<select id="testB">
    <option>Yes</option>
    <option>No</option>
    <option>Maybe</option>
    <option>So</option>
</select>

CSS

.dropDown {
    border: solid 1px ActiveBorder;
    display: none;
    position: absolute;
}

.dropDown a {
    color: WindowText;
    cursor: default;
    display: block;
    font: Caption;
    font-size: smaller;
    text-decoration: none;
}

.dropDown a:hover,
.dropDown a.selected {
    background-color: Highlight;
    color: HighlightText;
    display: block;
}

JavaScript

var sel = $("select");

sel.each(function(i, el) {
    var $this = $(el)
    var id = $this.attr("id") + "_dropDown";   
    var off = $this.offset();
    var div = $("<div/>").addClass("dropDown").css({
        left: off.left + "px",
        top: (off.top + $this.height() + 2) + "px",
        width: $this.width()
    }).attr("id", id).mouseover(function() {
        $(".selected", this).removeClass("selected")
    });

    $("option", el).each(function(j, el2) {
        var css = (el2.selected) ? "selected" : "";
        $("<a/>")
          .attr("href", "#")
          .html(el2.text)
          .addClass(css)
          .click(function() {
            sel.attr("value", el2.value);
            div.hide();
          }).appendTo(div);
    });

    div.appendTo("body");
    $this.click(function() { $("#" + id).hide(); });
});

$("button").click(function() {
    $("select").each(function(i, el) {
        $("#" + el.id + "_dropDown").show();
    });
});