multiple select 下拉到滚动条底部 异步加载 onscroll

select 标签 必须是要是multiple的，没有multiple属性，select是没有onscroll事件的

不支持IE6,在IE8、firefox15,chrome下可以运行

   

源码

View Code 
<html>
<title>select onscroll 事件</title>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    var pageSize = 10;        //每次加载的数量
    var loadOrNo = true;    //是否继续加载 默认为加载
    $(function(){
            //初始化加载一定数量的选项
            for(var i=0;i<10;i++){
                $('#select1').append($('<option/>').val(i).text('选项'+i));
            }
            
            $('#select1').bind('scroll',loadItem);
    });
        function loadItem(){        
                    var vst = parseInt($('#select1')[0].scrollTop);
                    var vsh =  parseInt($('#select1')[0].scrollHeight);
                    var vch =  parseInt($('#select1')[0].clientHeight);
                    var len =  $('#select1 option').length;
                    //如果下拉到底，判断是否要继续加载
                    if((vst + vch == vsh) && loadOrNo){
                            //这里可以异步取数据，根据返回结果判断是否继续加载
                            if(len > 100){
                                    loadOrNo = false;
                                }
                            for(var i=len+1;i<len+pageSize;i++){
                                $('#select1').append($('<option/>').val(i).text('选项'+i));
                            }
                    }
                
            }
    
</script>
<body>
    
    <select id="select1"  multiple="multiple" size="10">
        <option value="">全部</option>    
    </select>
</body>
    
</html>

 

posted @ 2012-10-19 17:35  shuaisam  阅读(3255)  评论(0)  编辑  收藏  举报