JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div>DIV example: <select id="dropdownDiv">
    <option value="Alpha">Alpha</option>
    <option value="Beta">Beta</option>
    <option value="Gamma">Gamma</option>
    </select>
</div>

<table id='tab1'>
<tr><td>Empty Cell</td></tr>
<tr><td> <select id="dropdown1">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
    </select>
</td>
<tr><td><select id="dropdown2">
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="15">1</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option></select>
</td></tr>
<tr><td>Empty Cell</td></tr></table>
<br><button id="fire" type="button" onclick="openDropdown('dropdownDiv', this)" >Show dropdownDiv items</button>
<button id="fire" type="button" onclick="openDropdown('dropdown1', this)" >Show dropdown1 items</button>
<button id="fire" type="button" onclick="openDropdown('dropdown2', this)" >Show dropdown2 items</button>

CSS

.no-scroll { cursor: pointer;}
.no-scroll::-webkit-scrollbar {display:none;}
.no-scroll::-moz-scrollbar {display:none;}
.no-scroll::-o-scrollbar {display:none;}
.no-scroll::-google-ms-scrollbar {display:none;}
.no-scroll::-khtml-scrollbar {display:none;}


.noArrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 3px;
    padding-right: 3px;
}


/* Cosmetic styles */
#tab1 tbody tr:nth-child(even) > td, div
{   background: linear-gradient( 180deg, #efefef 1%, #eeeeee 15%, #e2e2e2 85%); 
}
        
#tab1 tbody tr td
{   padding: 4px; 
}
        
#tab1
{   border: 1px solid silver; 
}

JavaScript

var lastClosedElem = null;
var maxItemsInDropDown = 12;

function openDropdown(elementId, opener)
{
   if (lastClosedElem !== null && lastClosedElem === opener)
   {
          lastClosedElem = null;
          return;
   }
   lastClosedElem = opener;
   
   function down()
    {
        var $this = $(this);

        var td = $this.closest('td,div');
        if (td && td.length > 0)
            td.height(td.height());

        var pos = $this.offset();
        var len = $this.find("option").length;
        if (len > 1 && len < maxItemsInDropDown)
        {
            $this.addClass('no-scroll');
            $this.addClass('noArrow');
        }
        else if (len > maxItemsInDropDown)
        {
            len = maxItemsInDropDown;
        }

        $this.css("position", "absolute");

        var _zIndex = $this.css("zIndex");
        if (!_zIndex)
            _zIndex = 'auto';
        $this.attr("_zIndex", _zIndex);
        $this.css("zIndex", 9999);

        $this.attr("size", len); // open dropdown
        $this.unbind("focus", down);
        $this.focus();
    }

    var up = function()
    {
        var $this = $(this);
        $this.css("position", "static");
        $this.attr("size", "1");
        $this.removeClass('no-scroll');
        $this.removeClass('noArrow');

        var _zIndex = $this.attr("zIndex");
        if (_zIndex)
        {
            $this.css("zIndex", _zIndex);
        }
        $this.unbind("blur", up);
        $this.unbind("click", upClick);
        $this.focus();
    }

    function upClick(e)
    {
        up.call(this);
        lastClosedElem = null;
    }


    $("#" + elementId).focus(down).blur(up).click(upClick).trigger('focus');
}