Select2 - Ajax 获取下拉框分页数据(鼠标滚动分页)

本文介绍了在下拉框中处理大量数据的场景,建议当数据超过100条时采用分页加载。示例代码展示了如何引入Select2库的CSS和JS文件,并使用Ajax进行分页数据请求。
摘要由CSDN通过智能技术生成

适用场景:下拉框中有大量数据的情况(建议100条数据以上就要考虑使用分页获取的方式了)。

直接上代码

    引入相关js和css

    select2/select2.min.css

    select2/select2.min.js

    select2/i18n/zh-CN.js

/**
 * ajax获取select2下拉框数据(带鼠标滚动分页)
 * @param selectId 下拉框id
 * @param options 选项,包含如下字段:
 * url 数据接口url
 * pageSize 每次加载的数据条数
 * name 下拉框显示字段名称
 * value 下拉框value字段名称
 * placeholder 默认显示的文字
 * selected 默认选中项,格式:[{id:1,text:"选项1"},{id:2,text:"选项2"}]
 * formatResult 返回结果回调函数,可以在该回调中,自定义下拉框数据的显示样式,比如:加入图片等
 * templateSelection 选中项回调,该参数必须与formatResult参数搭配使用
 * 注意点1 : 后端接口需返回 data(具体数据)和 total(总页数)两个字段
 * 注意点2 : 两个自定义的回调函数中,必须要把处理结果return回来,如果没有传入formatResult参数,则采用默认的显示样式
 */
function ajaxSelect2 (selectId,options,formatResult,formatSelected) {
    var value = options["valu
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
下拉框select分页加载通常是通过异步加载数据来实现的。具体的实现方式如下: 1. 在下拉框初始化时,只加载第一页的数据,并将总页数存储在变量中。 2. 当用户向下滚动下拉框的底部时,触发异步请求,加载下一页的数据。 3. 将新加载的数据添加到下拉框选项列表中。 4. 如果新加载的数据是最后一页的数据,禁用下拉框滚动事件。 5. 如果用户重新打开下拉框,重新启用滚动事件并加载第一页的数据。 需要注意以下几点: 1. 异步请求需要使用异步方式,以避免阻塞页面。 2. 由于下拉框滚动事件是在下拉框内部触发的,因此需要使用事件代理来绑定滚动事件。 下面是一个简单的示例代码: ```html <select id="select"> <option value="">请选择</option> </select> ``` ```javascript var pageSize = 10; // 每页显示的数据量 var pageNum = 1; // 当前页码 var totalPage = 10; // 总页数 var isLoading = false; // 是否正在加载中 // 初始化下拉框 function initSelect() { // 绑定滚动事件 $('#select').on('scroll', function() { var scrollTop = $(this).scrollTop(); var scrollHeight = $(this).get(0).scrollHeight; var height = $(this).height(); // 如果滚动到底部,并且不是最后一页数据,加载下一页数据 if (scrollTop + height == scrollHeight && pageNum < totalPage && !isLoading) { isLoading = true; loadNextPage(); } }); // 加载第一页数据 loadNextPage(); } // 加载下一页数据 function loadNextPage() { $.ajax({ url: 'url/to/get/data', data: { pageSize: pageSize, pageNum: pageNum }, success: function(data) { // 添加新数据下拉框中 // ... pageNum++; isLoading = false; } }); } ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值