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 に答える