JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<select name="" id="" class="select-group">
  <option value="">option1</option>
  <option value="">option2</option>
  <option value="">option3</option>
  <option value="">option4</option>
  <option value="">option5</option>
  <option value="">option6</option>
  <option value="">option7</option>
  <option value="">option8</option>
  <option value="">option9</option>
  <option value="">option10</option>
  <option value="">option11</option>
  <option value="">option12</option>
  <option value="">option13</option>
  <option value="">option14</option>
  <option value="">option15</option>
  <option value="">option16</option>
  <option value="">option17</option>
  <option value="">option18</option>
  <option value="">option19</option>
</select>

CSS

select {
  width: 50%;
  /* max-height: 90px; */
}

JavaScript

var selectGroup = document.querySelector('.select-group');
var selectGroupOpt = selectGroup.querySelectorAll('option')

selectGroup.size = selectGroupOpt.length;

if(selectGroupOpt.length >= 10 ) {
  selectGroup.size = 10;
}
/* console.log(selectGroupOpt.length) */