JSFiddle - React, Tailwind, and code Playground

HTML

100 Options, None Hidden:<br>
<div id="ph1"></div>

<br><br><br>
    
100 Options, 90% Hidden:<br>
<select id="ph2"></select>

JavaScript

var html = "";
for(var i = 0; i < 100; ++i)
{
    html += "<option>Option "+i+"</option>";
}
html = "<select>"+html+"</select>";
document.getElementById("ph1").innerHTML = html;

var html = "<option>--------------------</option>";
for(var i = 0; i < 100; ++i)
{
     
    
    if(i < 90)
        html += "<option style='display:none;'>Option "+i+"</option>";
    else
        html += "<option>Option "+i+"</option>";
}

$('#ph2').html(html);

$(document).ready(function () {
    
    $('#ph2').mouseenter(function () {
        
      var html = '';
        
        $(this).find('option').each(function () {
           
            if ($(this).css('display') !== 'none') {
             html = html + '<option>' + $(this).text() + '</option>';   
            }
        });
        
        $(this).html(html);
    })
});