JSFiddle - React, Tailwind, and code Playground

by Mohit Kumar Gupta

HTML

<select id="ts" size="1">
    <option value="1">1</option>
    <option value="2">Lorem ipsum dolor s.</option>
    <option value="3">3</option>
    <option value="3">4</option>
    <option value="3">5</option>
</select>

<input type="button" id="click" value="Click"/>

CSS

#click {position: absolute; left: 160px;top: 2px;}

JavaScript

$(function(){
   $("#click").on('click', function(){
       var s = $("#ts").attr('size')==1?5:1
       $("#ts").attr('size', s);
   });
   $("#ts option").on({
       click: function() {
           $("#ts").attr('size', 1);
       },
       mouseenter: function() {
           $(this).css({background: '#498BFC', color: '#fff'});
       },
       mouseleave: function() {
           $(this).css({background: '#fff', color: '#000'});
       }
   });
});