JSFiddle - React, Tailwind, and code Playground

by Carlos Medina

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
         <span id="camDurationSpanId" style="font-size:18px; position: absolute; top:8px; width:305px; height :42px;">open select</span>
         

            <select id="camDurationId" name="camDuration" style="margin:42px 0 0 5px; border: none" onmousedown="{this.size=this.options.length;} " onchange='this.size=0;' onblur="this.size=0;">
                   <option value="0">All Duration</option>
                   <option value="1">Last Month</option>
                   <option value="2">Last Two Weeks</option>
                   <option value="3">Last Week</option>
                   <option value="4">Custom</option>
            </select>

JavaScript

$(function () {
                 $('#camDurationSpanId').click(function () {
                        $('#camDurationId').attr('size',5);
                        $('#camDurationSpanId').text('select Option');
                    });
                    
                    $('#camDurationId').change(function(){
                        $('#camDurationSpanId').text($('#camDurationId option:selected').text() + ' ' + 'Selected')
                    	
                    })
                });