模拟展开select标签事件

通过改变select标签的size属性，可以实现展开select标签的效果

html代码：

<select id="ts" size="1">
    <option value="1">1</option>
    <option value="2">Lorem ipsum dolor s.</option>
    <option value="3">3</option>
    <option value="3">4</option>
    <option value="3">5</option>
</select>


<input type="button" id="click" value="Click"/>

js代码：

$(function(){
   $("#click").on('click', function(){
       var s = $("#ts").attr('size')==1?5:1
       $("#ts").attr('size', s);
   });
   $("#ts option").on({
       click: function() {
           $("#ts").attr('size', 1);
       },
       mouseenter: function() {
           $(this).css({background: '#498BFC', color: '#fff'});
       },
       mouseleave: function() {
           $(this).css({background: '#fff', color: '#000'});
       }
   });
});

实例：http://jsfiddle.net/g3Ta3/4/