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

Question

我想做一个这样的选择框

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

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

Answer 1

将 size="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();
});

Demo @ Fiddle

---

试试这个:

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

---

正如您评论的那样:

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

所以你可以用这个做模型:

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

Demo with hover class .