jQuery Select option auto open

jQuery Select option auto open

by Adi Jaya

HTML

<article>
   <div id="container">
      if <code>&lt;select/&gt;</code> Selected, this back to normal
      <span class="container-select">
         <select id="Select">
            <option>option 1</option>
            <option>option 2</option>
            <option>option 3</option>
            <option>option 4</option>
         </select>
      </span>
      lorem ipsum
      <p>Lorem ipsum lorem ipsum</p>
<textarea>if textarea focus, select back to normal

.container-select {
  position: : relative;
  display   : inline-block;
}
</textarea>
   </div>
</article>
<button>Open Select</button>
<h2>This h2, if me on hover, select back to normal</h2>

<p>
<b>Browser Support attributes <code>size</code></b> : https://www.w3schools.com/tags/att_size.asp
</p>

CSS

.container-select {
  position: : relative;
  display: inline-block;
}

code {
  color: red;
}

textarea {
  width: 80%;
  height: 150px;
  color: green;
}

JavaScript

//by : https://www.facebook.com/nafis3333
//tester with jQuery 3.2.1

var widthselect = $('#Select').width();
var heightselect = $('#Select').height();
var lengthoption = $('#Select > option').length;

//example 1 for onload page
$('.container-select').css({
    'width': widthselect,
    'height': heightselect
});
$('#Select').attr('size', lengthoption).css({
    'position': 'absolute',
    'z-index': '1000'
});

//example 2 for event click adn etc...
// example with button
$('button').on('click', function() {
    $('.container-select').css({
        'width': widthselect,
        'height': heightselect
    });
    $('#Select').attr('size', lengthoption).css({
        'position': 'absolute',
        'z-index': '1000'
    });
});


//this for back to normal
$('#Select').on('blur change', function() {
    $(this).removeAttr('size').css({
        'position': '',
        'z-index': ''
    });
    $('.container-select').css({
        'width': '',
        'height': ''
    });
    $('textarea').focus(); //or other target
});

//optional for back to normal
$('textarea').on('focus', function() {
    $('#Select').removeAttr('size').css({
        'position': '',
        'z-index': ''
    });
    $('.container-select').css({
        'width': '',
        'height': ''
    });    
});

//optional for back to normal
$('h2').on('mouseenter', function() {
    $('#Select').removeAttr('size').css({
        'position': '',
        'z-index': ''
    });
    $('.container-select').css({
        'width': '',
        'height': ''
    });    
});