Ajax js中的分页下拉选项答案

【问题标题】：pagination dropdown options in Ajax jsAjax js中的分页下拉选项
【发布时间】：2021-04-21 08:47:50
【问题描述】：

我有两个选择字段。 States and cities。按州选择显示城市列表。但在 Android 手机上，它似乎很晚（很慢）。这就是我想分页的原因。如何在我的代码下方对下拉选项进行分页：

<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>

【问题讨论】：

标签： ajax jquery-select2

【解决方案1】：

Select2 内置了 AJAX 支持，使用 jQuery 的 AJAX 方法。

包括所有的 js 和 css 插件。 Select2 4.0.0以上需要使用。

在您的 HTML 中：

<select class="target" id="city"></select>

以下JS注意事项

items：包含将要使用的数据和选项
item object：每个对象包含 {id:"1", test:"city 1"}
页面：当前页码
total_count：该州的城市总数
term ：此参数可用于搜索。

在您的 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
  }
});

【讨论】：