CodeIgniter实现二级联动下拉框（基于车型加载违规类型）求助

我来帮你一步步搞定这个联动下拉的需求，咱们分几个部分来调整代码：

1. 更新Model，添加车型关联罚款类型的查询方法 #

首先在你的vehicle_type_model里新增一个方法，用来根据选中的车型ID获取对应的罚款类型：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class vehicle_type_model extends CI_Model {
    /*
     * Get All Vehicle types
     */
    public function getAllVtype() {
        $result = $this->db->get('vehicle_type');
        return $result->result_array();
    }
    public function getAllPenalityType() {
        $result = $this->db->get('penality_type');
        return $result->result_array();
    }

    // 新增：根据车型ID获取关联的罚款类型
    public function getPenalityTypeByVehicleId($vehicle_id) {
        // 这里假设penality_type表有vehicle_type_id字段关联车型表，根据你的实际表结构调整
        $this->db->where('vehicle_type_id', $vehicle_id);
        $result = $this->db->get('penality_type');
        return $result->result_array();
    }
}

2. 扩展Controller，添加AJAX接口并初始化车型数据 #

在你的控制器里，先确保车型数据正确传递到视图，然后新增一个处理AJAX请求的方法，用来返回对应车型的罚款类型：

public function index() {
    $data['vehicle_type'] = $this->vehicle_type_model->getAllVtype();
    // 不需要提前传递所有罚款类型，改为联动加载
    // $data['penality_type'] = $this->vehicle_type_model->getAllPenalityType();
    $this->load->view('admin/penality_type_price/view_penality_type_price', $data);
}

// 新增：处理AJAX请求，返回对应车型的罚款类型
public function get_penality_by_vehicle() {
    // 验证是否为AJAX请求
    if($this->input->is_ajax_request()) {
        $vehicle_id = $this->input->post('vehicle_id');
        $penality_types = $this->vehicle_type_model->getPenalityTypeByVehicleId($vehicle_id);
        // 以JSON格式返回数据
        echo json_encode($penality_types);
        exit;
    }
}

记得在路由配置文件（application/config/routes.php）里添加对应路由，比如：

$route['get-penality-by-vehicle'] = '你的控制器名称/get_penality_by_vehicle';

3. 修改View，填充车型下拉并添加AJAX联动逻辑 #

现在把车型数据填充到第一个下拉框，再添加jQuery监听下拉变化，请求后端数据填充第二个下拉：

<div class="form-group">
    <label for="vehicle_type_id">Vehicle Type</label>
    <select name="vehicle_type_id" class="form-control vehicle_type_id">
        <option value="">Select Vehicle type</option>
        <!-- 循环渲染车型选项 -->
        <?php foreach($vehicle_type as $vtype): ?>
            <option value="<?php echo $vtype['id']; ?>"><?php echo $vtype['name']; ?></option>
        <?php endforeach; ?>
    </select>
</div>
<div class="form-group">
    <label for="penality_type_id">penality type</label>
    <select name="penality_type_id" class="form-control penality_type_id">
        <option value="">Select penality type</option>
    </select>
</div>

<!-- 引入jQuery（如果项目未引入的话） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 监听车型下拉框的选择变化
    $('.vehicle_type_id').change(function() {
        var vehicle_id = $(this).val();
        var penalitySelect = $('.penality_type_id');
        
        // 清空之前的选项，保留默认提示
        penalitySelect.html('<option value="">Select penality type</option>');
        
        // 如果选中了有效车型，发起AJAX请求
        if(vehicle_id) {
            $.ajax({
                url: '<?php echo base_url('get-penality-by-vehicle'); ?>',
                type: 'POST',
                data: {vehicle_id: vehicle_id},
                dataType: 'json',
                success: function(response) {
                    // 循环添加罚款类型选项
                    $.each(response, function(index, item) {
                        penalitySelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                    });
                },
                error: function() {
                    alert('加载罚款类型失败，请重试');
                }
            });
        }
    });
});
</script>

⚠️ 注意：这里假设你的车型表字段是id和name，罚款类型表也是id和name，并且罚款类型表有vehicle_type_id字段关联车型ID，你需要根据自己的实际数据库表字段名调整代码中的字段。

4. 额外注意事项 #

• 如果你的CodeIgniter项目启用了CSRF保护，AJAX请求需要带上CSRF Token：
  在视图头部添加：

  <meta name="csrf-token" content="<?php echo $this->security->get_csrf_hash(); ?>">
  

  然后在AJAX请求中添加：

  headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  

• 确认控制器名称和路由配置正确，保证AJAX请求的URL能正确访问到对应方法。

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