Question

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

当用户选择了值时，我希望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

请尝试代码......

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

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

1 个答案: