使用AJAX异步加载select选项解决3万条城市数据拖慢页面及实现异常问题

核心问题原因 #

• 定义的getcityAJAX请求函数没有触发时机，页面加载完成后不会自动执行，初始状态下#city-wrap容器内只有错误提示文本，没有下拉框DOM
• ajaxcities.php视图用到了$listing、$read等变量，但控制器ajaxgetcity方法没有传递这些参数，容易引发PHP报错导致返回内容为空
• 你使用了select2下拉组件，AJAX动态插入的select元素需要手动重新初始化select2才会正常渲染
• 即使通过AJAX加载，一次性返回3万条option依然会造成前端卡顿，建议搭配select2的远程搜索能力优化

具体修改步骤 #

1. 调整视图层代码 #

补充函数触发逻辑，AJAX成功后初始化select2：

<label class="control-labels ">City</label>
<span id="city-wrap">
  <div class="invalid-feedback">Please choose a City</div>
</span>
<script>
// 如果是和国家下拉框联动，给国家下拉框绑定change事件即可，不需要页面加载就调用
// 示例：假设国家下拉框id为country-select，绑定触发逻辑
// $('#country-select').on('change', function(){
//   getcity($(this))
// })

// 如果页面加载就需要显示城市下拉框，直接在DOM加载完成后调用
$(function(){
  // 把当前已有选中的城市id、read状态等参数传递给接口
  var selectedEmirate = "<?php echo $listing[0]['emirate'] ?? ''; ?>";
  var readStatus = "<?php echo $read ?? ''; ?>";
  $.ajax({
    type: "post",
    url: "<?php echo site_url('listings/ajaxgetcity'); ?>/",
    data: {
      selected_emirate: selectedEmirate,
      read: readStatus
    },
    success: function(result) { 
      $('#city-wrap').html(result);
      // 手动初始化select2组件
      $('.select2').select2();
    }
  });
})
</script>

2. 调整控制器方法 #

接收前端传递的参数，传递给AJAX视图：

public function ajaxgetcity()
{
    $views['cities'] = $this->listings_model->cities();
    // 接收前端传的选中值和只读状态
    $views['listing'] = [['emirate' => $this->input->post('selected_emirate')]];
    $views['read'] = $this->input->post('read');
    $this->load->view('crm/listings/ajaxcities',$views,false);
}

3. 性能优化建议（可选但推荐） #

3万条数据一次性加载依然会占用大量前端资源，建议改成select2的远程搜索模式，用户输入关键词时再请求后端返回匹配的少量城市选项，避免一次性加载全量数据。

内容的提问来源于stack exchange，提问作者JAYZ