通过大数据的ajax创建动态选择框答案

【问题标题】：create dynamic select box through ajax with large data通过大数据的ajax创建动态选择框
【发布时间】：2019-07-01 19:29:32
【问题描述】：

我正在使用 codeigniter 和 ajax。有两个选择框，例如国家和州。我通过 ajax 请求将选项附加到基于国家/地区的州选择框。它适用于数百条记录。但是当记录数超过 1000 条时，ajax 需要花费太多时间来创建选择框，甚至页面进入无响应状态。我正在使用此代码：

    var country_id = $(selector).val();
        $.ajax({

            url:'<?php echo base_url()?>getstates',
            crossDomain: true,
            data:'country_id ='+country_id ,

            success:function(data){
              var dataObj = jQuery.parseJSON(data);
               $(dataObj).each(function(){
                        // Remove options 
                          $('#selectBoxState').find('option').not(':first').remove();

                          // Add options
                          $.each(dataObj,function(index,data){
                             $('#selectBoxState').append('<option value="'+data['state_id']+'">'+data['state_name']+'</option>');
                          });


                    });

                },
                error: function() {
                        alert("failure");

                    }
                });

最好的方法是什么。

【问题讨论】：

您是否清除了每次县级变更时的州选择框？
是的，我在每个国家/地区更改时都将其设为空。
但是当记录超过1000条时，时间太长，进入无响应状态
好的。我认为你可以实现延迟加载。 stackoverflow.com/a/42613043/3698937参考这个链接..我认为它可以帮助你

标签： javascript jquery ajax codeigniter

【解决方案1】：

这是我的 CodeIgniter 3.x

的工作解决方案

控制器页面

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Controller_name extends CI_Controller {

    function __construct()
    {
        parent::__construct();     
    }     

    public function index()
    {
        $this->load-helper('dropdown');
        $dropdownItems = listData('countryTableName','countryId', 'countryName',['where' => ['countryStatus' => 1]]);
        $selected = array('null');
        $data['countryDropdown'] = form_dropdown('countryId',$dropdownItems,$selected);
        $data['stateDropdown'] =   form_dropdown('stateId',[], '', 'required="required"');
        $this->load->view('page_view',$data);
    }

public function get_state()
{
    $countryId = $this->input->get('countryId');
    $dropdownItems = listData('stateTableName','stateId', 'stateName',['where' => ['countryId' => $countryId,'stateStatus' => 1]]);
    $selected = array('null');
    echo $stateDropdown =   form_dropdown('stateId',$dropdownItems,$selected);
}

}

将此 dropdown_helper.php 放在 Helper 目录中

<?php
if(!defined('BASEPATH')) exit('No direct script access allowed');


  function listData($table,$name,$value,$options = []) {
      $items = array();
      $CI =& get_instance();
      if(array_key_exists('where',$options)) {
          $CI->db->where($options['where']);
      }
      $query = $CI->db->select("$name,$value")->from($table)->get();
      if ($query->num_rows() > 0) {
          foreach($query->result() as $data) {
              $items[$data->$name] = $data->$value;
          }
          $default = array('null' => 'Please Select');
          $select = $default + $items;          
          $query->free_result();
          return $select;
      }
  }

在视图页面中只是回显

<?php echo $countryDropdown; ?>
<?php echo $stateDropdown; ?>

js文件

$(function(){
    $('select[name=countryId]').on('change',function(){
        $('select[name=stateId]').html('');
        $.ajax({
            url: 'controller_name/get_state?countryId='+$(this).val(),
            type: "GET",
         }).done(function(data) {
            $('select[name=stateId]').html(data);
         }).fail(function() {

         }).always(function() {

        });
    });
});

【讨论】：