select2 动态加载数据
时间: 2023-12-07 15:04:23 浏览: 37
以下是使用jQuery Ajax实现Select2动态加载数据的示例代码:
```javascript
// HTML代码
<select id="mySelect2"></select>
// JavaScript代码
$(document).ready(function() {
// 初始化Select2
$('#mySelect2').select2({
placeholder: '请选择',
ajax: {
url: 'your_url', // 后端接口地址
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // 搜索关键字
page: params.page
};
},
processResults: function(data, params) {
params.page = params.page || 1;
return {
results: data.items, // 后端返回的数据列表
pagination: {
more: (params.page * 30) < data.total_count // 是否还有更多数据
}
};
},
cache: true
},
minimumInputLength: 1 // 最少输入1个字符才触发搜索
});
});
```
在上述代码中,我们使用了Select2插件的Ajax功能来实现动态加载数据。具体来说,我们在初始化Select2时,指定了一个Ajax配置对象,其中包含了后端接口地址、搜索关键字、分页信息等参数。当用户在Select2中输入关键字时,Select2会自动向后端接口发送Ajax请求,并将搜索关键字和分页信息作为参数传递给后端。后端接口返回的数据列表会被Select2插件自动处理并显示在下拉框中。