Dom size Attribute Tags Select

by Adi Jaya

HTML

<div>
  <select class="demo">
    <option>aaaa</option>
    <option>ssss</option>
    <option>dddd</option>
    <option>ffff</option>
    <option>gggg</option>
    <option>hhhh</option>
    <option>jjjj</option>
    <option>kkkk</option>
    <option>llll</option>
    <option>mmmm</option>
    <option>nnnn</option>
    <option>oooo</option>
    <option>pppp</option>
  </select>
  <hr>
  <select class="demo">
    <option>0000</option>
    <option>1111</option>
    <option>2222</option>
    <option>3333</option>
  </select>
</div>

CSS

div {
  padding: 10px;
  border: 4px solid blue;
}

JavaScript

var elem = document.querySelectorAll(".demo");

for(var i = 0; i < elem.length; i++ ){
	
  //attr "size"
	elem[i].addEventListener("focus", function(){
  	var lenChild = this.children.length;
    this.setAttribute( "size", lenChild );
  });
  
  //remove attr "size"
  for(event of ["focusout", "change"]) {
		elem[i].addEventListener(event, function(){
  		this.removeAttribute( "size" );
  	});
  }
 
}


/* jquery version
$( ".demo" ).on("focus", function(){
  var len = $(this).children().length;
  $( this ).attr("size", len)
}).on("focusout change", function(){
  $( this ).removeAttr("size")
});
*/