Question

我在下拉列表中有10个项目，并且当我打开下拉列表时只想显示前5个项目，其余项目应保持滚动状态。

我有以下代码来控制JS中的大小。

$(function(){
  $("#myList").click(function(){
    $(this).attr('size', '5');
  });
});

在HTML ...

中设置以下内容

<select size="5">
  <option value=""></option>
  ...
</select>

会使下拉列表始终显示为默认的5个项目，浏览器可以按照自己的方式处理，因此我想通过JS进行此操作。

问题，这是打开的5个项目，但没有像正常的下拉菜单一样自动关闭，直到页面刷新（显然）。请指教。

Answer 1

您可以更改列表，使其显示多个项目，然后仅在删除悬停时显示所选项目：

$(document).ready(function(){

$("#mylist").hover(function(){

$(this).attr('size', '5');
},function(){
 $(this).removeAttr("size");   
});

});

-- SEE DEMO --

Answer 2

然而，已接受的解决方案工作得很好，但仅适用于 1.9 之前的jQuery版本，因为此版本中此版本为hover has been deprecated。

但如果您不想切换到较新版本，则可以使用hover()和其他已弃用的功能使用jQuery migrate plugin。

更高版本jQuery的替代解决方案，即v1.9 +

$(function(){
  $("#myList").on({
    mousedown: function(){
      $(this).attr('size', '5');
    },

    mouseleave: function(){
      $(this).removeAttr('size');
    }
  });
});

这是working DEMO。

限制打开时在HTML下拉列表中显示的项目

2 个答案: