下拉菜单- jQuery如何在多个选择框的顶部设置选定值

Question

我正在制作一个默认情况下不应该占用太多空间的多重选择框。因此，当鼠标移到上方时，它将展开。

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

我在这里发布了完整的示例。http://jsfiddle.net/pNu2b/3/

，这是我使用的代码:

<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");
});
});

澄清一下。如果选择1997和1998。1990和1991将在离开选择框时显示。我想显示选中的值。就像图片中右边的部分是正确的，左边的部分是错误的。http://tinypic.com/r/1ie7mc/6

Answer 1

Please try code…

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