Ajax js 中的分页下拉选项

Question

我有两个选择字段。

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>

Answer 1

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

包含所有js和css插件。 Select2 4.0.0或以上版本需要使用。

在您的 HTML 中：

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

以下JS注意事项

• items：包含将使用的数据和选项
• item对象：每个对象包含{id:"1", test:"city 1"}
• page：当前页码
• 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
  }
});

Answer 2

<div class="col-sm-6">
<label>Client Details *</label>
<input type="text" name="ClientId" id="ClientId" class="form-control" required>
</div>


$.ajax({
        url: baseURL + 'getfile/ClientDetails',
        type: "GET",
        dataType: 'json',           
        success: function (result) {
            console.log(result);            
            var testdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
            console.log(testdata);
            let data = [];
            for (var i = 0; i < result.length; i++) {
                //console.log(result[i]);
                data.push.apply(data,result[i]);
            }
            console.log(data);
                 

$("#ClientId").select2({
  data: data,
  minimumResultsForSearch: 20
})

}
}); 




 function ClientDetails() {
   
    $getAllClients = getdetails($id);
    $getAllClients = $getAllClients['Accountdetails'];
         
    $details = [];        
    foreach($getAllClients as $val){
        $id = $val['id'];
        $name = $val['client_name'];
        $details[] = array(
            'id' => $id,
            'text' => $name
        );
    }
        
    print_r(json_encode(array($details)));
}