如何修复下拉列表的溢出？

Question

我有3个下拉菜单。第一次下拉的选项很顺利，但最后一次下拉的选项有点混乱。

这是我的css

 select option {
        background: #E6EABF;
        color: #000000;
        overflow-y: scroll;
        z-index: 100;

 }

请最后一个是多选下拉列表。

感谢任何形式的帮助！

Answer 1

Give the select an size would have worked: size="8"

Since its not hard coded use js:

var select = document.getElementById('select');
select.size = select.length;

 
 select option {
        background: #E6EABF;
        color: #000000;
     
        }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple size="return this.length();">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
    <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>