选择元素下拉列表(选项元素)的最大高度 [英] max-height for select element dropdown (option elements)

查看:321
本文介绍了选择元素下拉列表(选项元素)的最大高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何限制选择元素下拉的高度 - 如果选项的总数大于此高度 - 我应该在下拉列表中滚动。



所以说我有以下html标记:

 < select> 
< option selected>选择< / option>
< option>这是一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< option>这是另一个选项< / option>
< / select>

我如何只显示前4个选项,

是我到目前为止,它不工作。

解决方案

在StackOverflow上搜索,我遇到了 this 。不幸的是,如果你想保持一个下拉框,你不能实现你想要的CSS。 JavaScript或jQuery会执行的窍门,如链接中所说,或者您可以使用 size 属性在 select 标签,但这将打破下拉框外观。


How do I limit the height of the dropdown of a select element - so that if the total amount of options is greater than this height - I should get a scroll in the dropdown. I'd be satisfied if I could do this in terms of pixels or number of items.

So say I had the following html markup:

<select>
    <option selected>Select</option>
    <option>This is an option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
    <option>This is another Option</option>
</select>

How would I display only say the first 4 options and the rest within a scroll.

This is what I have so far, and it's not working.

解决方案

Searching around on StackOverflow, I came across this. Sadly enough, if you want to keep it a dropdown-box, you cannot achieve what you want in CSS. JavaScript or jQuery will do the trick, as said in the link, or you could use the size attribute on your select tag, but this will break the dropdown-box look.

这篇关于选择元素下拉列表(选项元素)的最大高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆