HTML选择标签显示垂直滚动与10选项

I want to make a select box like this

我想做一个像这样的选择框

with 10 select option, when I try to add more than 15 option it show vertical scroll bar, but not show when it have 10 option.

使用10个select选项，当我尝试添加超过15个选项时，它会显示垂直滚动条，但当它有10个选项时不会显示。

is there any way to achieve this.

有什么办法可以做到这一点吗?

3 个解决方案

#1

apply a size="10" to your select.

将大小="10"应用到您的选择。

something like:

喜欢的东西:

<select size="10">
   // all your options
</select>

---

You have to put some style to the label like border, background-image etc.

你必须在标签上加上一些样式比如边框，背景图片等等。

Something like this to be done:

要做的事情如下:

<label id='choose' for='options'>Select options</label>
<br clear='all' />
<select id='options' size="10" style='display:none;'>
    // all the options
</select>

then use this jQuery code:

然后使用jQuery代码:

$('#choose').click(function(){
    $(this).siblings('select').toggle();
});

Demo @ Fiddle

---

Try with this:

试试这个:

$('#choose').click(function (e) {
    e.stopPropagation();
    $(this).siblings('select').css('width', $(this).outerWidth(true)).toggle();
});

$('#options').change(function (e) {
    e.stopPropagation();
    var val = this.value || 'Select options';
    $(this).siblings('#choose').text(val);
    $(this).hide();
});

---

As you commented:

当你说:

when size is greater then 1 of select tag, its not showing blue background in hover, when i add background through css option:hover, its working in FF, but not in chrome and safari.

当大小大于选择标签的1时，它不会在鼠标悬停时显示蓝色背景，当我通过css选项:鼠标悬停时，它会在FF中工作，但不会在chrome和safari中。

so you can mockup with this:

你可以这样模拟

$('#options').find('option').on({
    mouseover: function () {
        $('.hover').removeClass('hover');
        $(this).addClass('hover');
    },
    mouseleave: function () {
        $(this).removeClass('hover');
    }
});

Demo with hover class.

#2

If you want good looking dropdown you can use

如果你想要好看的下拉菜单，你可以使用

http://harvesthq.github.io/chosen/

http://harvesthq.github.io/chosen/

You can control height of dropdown using css.

您可以使用css控制下拉列表的高度。

#3

Size attribute specifies the number of visible options in a drop-down list. If the value of the size attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.

Size属性指定下拉列表中可见选项的数量。如果size属性的值大于1，但小于列表中选项的总数，浏览器将添加一个滚动条，以指示有更多选项可以查看。

So use <select size="10">..</select>

所以使用 <选择大小= " 10> . < /选择>