JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<div class="hello"> 
<select style=width:80px>

<option value= 1 onmousedown=null >value1</option>
<option value= 2 >Bigvalue1</option>
<option value= 1 >veryBigvalue1</option>
<option value= 1 >veryveryverybigvalue1</option>
<option value= 1 >value1</option>
 </select>
</div>
<p></p>
<b></b>

 <div class="hello"> 
<select style=width:90px>

<option value= 1 >value1</option>
<option value= 2 >Bigvalue1</option>
<option value= 1 >veryBigvalue1</option>
<option value= 1 >veryveryverybigvalue1678678678678</option>
<option value= 1 >value1</option>
 </select>
</div>

CSS

.hello{
    overflow-x:hidden;
    
}
p{
    margin-top:200px;
    
}

JavaScript

var i=0;    
var selectWidth;
$("select").each(function(){
 selectWidth = $(this).width();
}).mousedown(function(e){
    if( e.which== 3 )
       {
         e.preventDefault();
              //or 
         return false;d
       }else{
i++
    if(i==2)i=0;
    

    if(i==1){  
$(this).parent().width(selectWidth);
    $(this).width("auto");
        $("b").html("current width of select on mousedown1 is -->"+$("select").css("width"))
    }
    else{
        
$(this).parent().width("auto");
       $(this).width(selectWidth); 
        $("b").html("width of select on mousedonw2 is -->"+$("select").css("width"))
    }
$("p").html("mouse down ---> "+i)
       }
}).blur(function(){
$(this).parent().width("auto");
       $(this).width(selectWidth); 
      

});