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>

 

你可能感兴趣的:(select)