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

【问题标题】：HTML Select tag show vertical scroll with 10 optionHTML Select 标记显示带有 10 个选项的垂直滚动
【发布时间】：2014-07-29 22:56:27
【问题描述】：

我想做一个这样的选择框

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

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

【问题讨论】：

屏幕上才会出现在选项大于大小时。 span>

标签： jquery html css select vertical-scroll

【解决方案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();
});

正如你评论的那样：

当尺寸大于选择标签的 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.

【讨论】：

点击选择标签后需要滚动，size=1
那么您必须进行一些自定义。等等，我会发布一些东西。
我需要这样，但在选择 jsfiddle.net/Bw7HT 中有 8-10 选项
@RohitK 查看添加的演示。
它在点击时打开列表，但在选择1选项时不隐藏并且不更改标签的值。

【解决方案2】：

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

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

【讨论】：

点击选择标签后需要滚动，size=1
然后您可以在单击选择时在事件上添加大小属性。
你能给我举个例子吗？
@rohitK，希望对您有所帮助。