HTML Select 标签显示带有 10 个选项的垂直滚动

Question

我想做一个这样的选择框

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

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

Answer 1

将 asize="10"应用于您的选择。

就像是：

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

您必须为标签添加一些样式，例如边框、背景图像等。

像这样的事情要做：

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

然后使用这个 jQuery 代码：

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

演示@小提琴

试试这个：

$('#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();
});

正如你评论的那样：

当尺寸大于选择标签的 1 时，它在悬停时不显示蓝色背景，当我通过 css option:hover 添加背景时，它在 FF 中工作，但在 chrome 和 safari 中不起作用。

所以你可以用这个模型：

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

带有悬停类的演示。