Select2内置AJAX支持，使用jQuery的AJAX方法。
我有两个选择字段。CCD_ 1。按州选择显示城市列表。但在安卓手机上，它出现得很晚(很慢(。这就是为什么我想繁殖。如何在下面的代码中对下拉选项进行分页：
<script>
$('#stateCode').on('change',function(){
var stateID = $(this).val();
if(stateID){
$('.spinner').show();
$('#city').prop('disabled', 'disabled');
$.ajax({
type:"get",
dataType: 'json',
url:"{{url('cityjson/get-city-listz')}}?state_id="+stateID,
success:function(res){
$('.spinner').hide();
$('#city').prop('disabled', false);
if(res){
$("#city").empty();
$.each(res,function(key,value){
$("#city").append('<option value="'+value+'">'+key+'</option>');
});
}else{
$("#city").empty();
}
}
});
}else{
$("#city").empty();
}
});
</script>
包括所有的js和css插件需要使用Select2 4.0.0或更高版本。
在HTML中：
<select class="target" id="city"></select>
注意以下JS
- 项目：包含将要使用的数据和选项
- 项目对象：每个对象包含{id:"1"，test:"城市1"}
- 页面：当前页码
- total_count：该州的城市总数
- 术语：此参数可用于搜索
在您的Javascript中：
$("#city").select2({
ajax: {
url: "/cityjson/get-city-listz",
dataType: 'json',
data: function (params) {
return {
state_id:stateID,
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
}
});