給select標簽設置下拉框高度
阿新 • • 發佈：2017-12-22
gpo alt aud 高度 style blur es2017 image 下拉
最近的需求涉及有下拉框，突然想到如果下拉選項過多的話可能要對下拉框的高度做一下限制，查了一下select標簽，有size這個屬性，原以為可以實現。
<!DOCTYPE html> <html> <body> <select size="3" style="width:100px"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> <option value="audi2">Audi2</option> <option value="audi3">Audi3</option> <option value="audi4">Audi4</option> <option value="audi5">Audi5</option> </select> </body> </html>
實際如下顯示：
直接只設置size的話，select標簽占size所設置的行數，並在size內滾動。
給select標簽設置事件實現限制下拉選項過長時的效果
onmousedown：當選項數量超出某個值時，限制最大顯示數量。
onblur：鼠標離開則收縮回一行
onchange：確定選項時收縮回一行
<!DOCTYPE html>
<html>
<body>
<select style="width:100px" onmousedown="if(this.options.length>3){this.size=4}" onblur="this.size=1" onchange="this.size=1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="audi2">Audi2</option>
<option value="audi3">Audi3</option>
<option value="audi4">Audi4</option>
<option value="audi5">Audi5</option>
</select>
</body>
</html>
實現效果：
未觸發時：
觸發時：
選擇選項後：
給select標簽設置下拉框高度