JSFiddle - React, Tailwind, and code Playground

HTML

<script>
        $(document).ready(function(){
            $('#input1').selectDrop();
        });
    </script>
        <div id="warper1">
            <select name="" id="select1" style="display:none;">
                <option value="高雄" >高雄</option>
                <option value="台北">台北</option>
                <option value="台中" selected>台中</option>
                <option value="台南">台南</option>
                <option value="花蓮">花蓮</option>
            </select>
            <div class="inputbox1" id = "input1"></div> 
            <button type="button">Submit</button>                  
        </div>

CSS

#warper1{ margin:20px; position:relative; width:202px; float: left;}

#warper1 ul{list-style:none; margin: 0; padding:0;}

#warper1 ul li{line-height:20px; cursor:pointer; margin:1px 0; font-size:12px; text-indent:5px;}

.inputbox1{width:202px; height:23px; line-height:23px; background: #fff ; border:1px solid #333;  font-size:12px; text-indent:5px;}

.hover{ background:blue; color:#fff;}
.hover1{ background:red; color:#fff;}

.select_ul{background:#ddd;}

JavaScript

// 自製下拉式選單
(function($){

      $.fn.selectDrop = function(){
        
        var $input_select = $(this);
        var $ul = $(document.createElement("ul"));
        var Selects = $(this).parent('#warper1').find('select');
        var opt = $('option', Selects);      
        var opt_num = opt.length;
        var opt_list = [];
        
        // init
        $ul.addClass('select_ul');
        $ul.mouseleave(function(){
                $ul.hide();
        });    

        //
         for (var i=0; i<opt_num;i++ ){
             
            opt_list[i] = $(opt[i]).val();
            var $li = $("<li>" + opt_list[i] + "</li>");
             
            $li.hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });
                
            $li.click(function(){
                $("#input1").text($(this).text());
                $li.parent().hide();
            });
             
             $ul.append($li);
        };

        $("#input1").text(opt_list[0]);
          
        $input_select.after($ul);
        $ul.hide();
        
        $("#input1").click(function(){
             $ul.show();
        });
    };
})(jQuery)