<select style="position: absolute;" onmousedown="if(this.options.length>8){this.size=8;}"  onchange='this.size=0;' onblur="this.size=0;" class="dropdown_list" name="list of majors" id="main_dropdown">

字符串
这对我来说很好，你可以根据你想让它出现的位置来调整位置。通过声明位置是绝对的，它会向下显示列表，如果你不声明它，那么它会显示在顶部移动所有其他代码。

我正在修改Deepshika的回答

$("#select-height").focus(function () {
      this.size=10;
      $(this).css({"height":"200px", "position":"absolute"});
})
$("#select-height").blur(function () {
  this.size=1;
  $(this).css({"height":"40px", "position":"inherit"});
});

#select-height{
  height:40px;
  z-index:1;
  width:200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>start</div>
<select id="select-height" 
onchange='this.size=1; this.blur();'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
     <option>12</option>
     <option>13</option>
     <option>14</option>
     <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
  </select>
  <div>Last</div>

Live Demo

也许这就是你需要的：

#main_dropdown_menu{
  height: 200px;
  background: grey;
}
#main_dropdown{
  height: 100%;
}

个字符

你可以在CSS中设置选择框的高度：

select.dropdown_list {
  height: 30px;
}

个字符

这个CSS将做的伎俩，调整到您的要求。

select {
   height: calc(1.5em + .75rem + 2px);
   padding: .375rem 1.75rem .375rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   vertical-align: middle;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

字符串

不能说关于功能，但为了美观的目的，只是给填充顶部和底部一个合适的字体大小可以带来的效果类似于增加高度的'选择'

<select class="dropdown_list">

</select>

字符串
在CSS中：根据需要给予填充。

.dropdown_list{
   padding: 10px 0 10px 10px;
}

型