HTML Select标签显示带有10个选项的垂直滚动 [英] HTML Select tag show vertical scroll with 10 option

问题描述

我要创建一个这样的选择框

I want to make a select box like this

具有10个选择选项，当我尝试添加15个以上的选项时，它会显示垂直滚动条， 但在有10个选项时不会显示.

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.

有什么方法可以实现这一目标.

is there any way to achieve this.

推荐答案

将size="10"应用于您的选择.

类似:

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

---

您必须在标签上加上边框，背景图片等样式.

---

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

要完成的事情

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

然后使用此jQuery代码:

then use this jQuery code:

$('#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:

当大小大于select标记的1时，当我通过css option:hover添加背景时，它的悬浮状态不会显示蓝色背景.hover可以在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');
    }
});

这篇关于HTML Select标签显示带有10个选项的垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！