jQuery如何在多个选择框的顶部设置选定值

我正在处理一个多选框，默认情况下它不会占用太多空间。因此，它将在结束时扩展

当用户选择了值时，我希望selectbox成为所选值数量的大小。这是可行的，但问题是所选值将不在选择框的顶部，第一个值将始终显示在顶部，如果不在顶部，这将使所选值隐藏。当用户离开选择框时，如何确保第一个选定值始终位于顶部

我已经在这里发布了完整的示例

这是我正在使用的代码：

<select id="yearOfBirth" name="yearOfBirth" size="4" multiple="multiple" style="cursor:pointer;" id="yearOfBirth">option value="" style="background-color:#000000; color:#FFFFFF;" selected="selected">Year of birth</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>


$(document).ready(function() {

$("#yearOfBirth").on('mouseenter',function(){
$(this).animate({"size": "10"}, "fast");
});
$("#yearOfBirth").on('mouseleave',function(){
var countSize = $("#yearOfBirth :selected").length;
$(this).animate({"size": countSize+1}, "fast");
});

});

option value=”“style=“背景色：#000000；颜色：#FFFFFF；”selected=“selected”>出生年份
1990
1991
1992
1993
1994
1995
1996
1997
1998
$（文档）.ready（函数（）{
$（“#出生年份”）.on（'mouseenter'，function（）{
$（this.animate（{“size”：“10”}，“fast”）；
});
$（“#出生年份”）.on（'mouseleave'，function（）{
var countSize=$（“#出生年份：选定”）。长度；
动画（{“size”：countSize+1}，“fast”）；
});
});

我只是想澄清一下。 如果选择1997年和1998年。1990和1991将在离开选择框时显示。我想显示选定的值。就像图中右边的部分是正确的一样，左边的部分是错误的。

请尝试代码

 $(document).ready(function() {

      $("#yearOfBirth").on('mouseenter',function(){ 
      $(this).attr('size',10);
  });
  $("#yearOfBirth").on('mouseleave',function(){
     var countSize = $("#yearOfBirth :selected").length;
     $(this).attr('size' ,countSize+1 );
  });
 });

---

​

你的意思是所选的值将改变其索引吗？我的意思是，如果我选择1997和1998，当我离开选择框时，它们将不会显示。相反，将显示未选择的值1990和1991。那么如果要隐藏它？那么您的意思是我们将删除选择框中的选定值？还是这样？感谢您的回复@Mahan。也许你了解一些事情，但我发布这张图片是为了更好地解释。这没有帮助。如果我选择1997和1998，当我离开选择框时，它们将不会显示。相反，将显示未选择的值1990和1991。