您的位置：首页 > 其它

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

2012-10-19 17:35 267 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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