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

最新推荐文章于 2023-08-22 10:00:00 发布

weixin_33936401

最新推荐文章于 2023-08-22 10:00:00 发布

阅读量478

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shuaisam/archive/2012/10/19/2731322.html

版权

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>