jquery - 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 选项添加背景时：悬停，它在 FF 中工作，但在 chrome 和 safari 中没有。

所以你可以用这个来模拟：

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

带有悬停类的演示。

Answer 2

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

所以使用<select size="10">..</select>