0

我正在研究一个默认情况下不应该占用太多空间的多选框。因此它会在鼠标悬停时展开。

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

我在这里发布了完整的示例。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

4

1 回答 1

0

请尝试代码...

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

​</p>

于 2012-12-29T12:25:39.157 回答