如何在CodeIgniter 3中实现关联动态下拉选择框？

1. 修正控制器初始数据查询 #

先修复现有permintaan方法中分类数据的错误查询逻辑：

public function permintaan()
{
    $this->form_validation->set_rules('tgl_permintaan', 'Tanggal Permintaan', 'required|trim');

    if ($this->form_validation->run() == FALSE) {
        $data['judul'] = 'Si TAPERA | Sistem Informasi Permintaan Perbaikan Alat dan Sarana Prasarana';
        $data['title'] = 'Permintaan perbaikan';
        $data['user'] = $this->db->get_where('user_login', ['username' => $this->session->userdata('username')])->row_array();
        $data['unit'] = $this->db->get_where('unit_kerja', ['status_unit' => 1])->result_array();
        // 修正：直接获取所有分类数据，原get_where条件无效
        $data['kategori'] = $this->db->get('kategori')->result_array();
        // 初始状态不加载所有子分类，仅留提示选项
        $data['sub_kategori'] = [];

        $this->load->view('templates/header', $data);
        $this->load->view('templates/sidebar_user', $data);
        $this->load->view('templates/topbar', $data);
        $this->load->view('user/data/permintaan', $data);
        $this->load->view('templates/footer');
    } else {
        // 原有提交逻辑保持不变
        $data = array(
            'sess_id' => $this->session->userdata('id_user'),
            'tgl_permintaan' => date('Y/m/d'),
            'jam_permintaan' => date('h:i:s'),
            'unit_kerja_id' => $this->input->post('unit_kerja_id', true),
            'kategori_id' => $this->input->post('kategori_id', true),
            'sub_kategori_id' => $this->input->post('sub_kategori_id', true),
            'urgas' => $this->input->post('urgas', true),
            'status_db_permintaan' => 1
        );
        $this->db->insert('db_permintaan', $data);
        $this->session->set_flashdata('message', 'Tambah data');
        redirect('user/permintaan');
    }
}

2. 添加AJAX接口方法（获取关联子分类） #

在同一控制器中新增方法，用于根据选中的分类ID返回对应的子分类数据：

public function get_sub_kategori()
{
    // 禁止非AJAX直接访问
    if (!$this->input->is_ajax_request()) {
        exit('No direct script access allowed');
    }

    $kategori_id = $this->input->post('kategori_id');
    // 查询关联子分类（假设sub_kategori表用kategori_id字段关联kategori的id_kategori，若你的关联字段是kategori_sub_id，替换即可）
    $sub_kategori = $this->db->get_where('sub_kategori', ['kategori_id' => $kategori_id])->result_array();

    // 返回JSON格式数据
    echo json_encode($sub_kategori);
}

3. 修改视图代码（修复重复选项+优化初始状态） #

调整下拉框代码，避免重复生成默认选项，优化子分类初始状态：

<div class="col-md-6">
    <div class="form-group">
        <label>Kategori Perbaikan</label>
        <select class="form-control form-control-sm" name="kategori_id" id="kategori" required>
            <option value="" selected disabled hidden>- Pilih -</option>
            <?php foreach ($kategori as $kategori1) : ?>
                <option value="<?php echo $kategori1['id_kategori']; ?>"><?php echo $kategori1['nama_kategori']; ?></option>
            <?php endforeach; ?>
        </select>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label>Sub Kategori Perbaikan</label>
        <select class="form-control form-control-sm" name="sub_kategori_id" id="sub_kateg" required>
            <option value="" selected disabled hidden>- Pilih Kategori Terlebih Dahulu -</option>
        </select>
    </div>
</div>

4. 添加jQuery AJAX代码实现联动 #

在视图底部（或footer模板中）添加以下JS代码，监听分类选择事件并动态更新子分类：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#kategori').change(function() {
        var kategori_id = $(this).val();
        
        // 清空子分类选项并显示加载提示
        $('#sub_kateg').html('<option value="" disabled selected>Memuat...</option>');
        
        if (kategori_id) {
            $.ajax({
                url: '<?php echo base_url('user/get_sub_kategori'); ?>', // 路径需匹配你的控制器方法位置
                type: 'POST',
                data: {kategori_id: kategori_id},
                dataType: 'json',
                success: function(response) {
                    // 重置子分类选项
                    $('#sub_kateg').html('<option value="" selected disabled hidden>- Pilih -</option>');
                    
                    // 循环添加子分类选项
                    $.each(response, function(index, item) {
                        $('#sub_kateg').append('<option value="' + item.id_sub_kategori + '">' + item.nama_sub_kategori + '</option>');
                    });
                },
                error: function() {
                    $('#sub_kateg').html('<option value="" disabled selected>Gagal memuat data</option>');
                }
            });
        } else {
            // 未选择分类时重置子分类提示
            $('#sub_kateg').html('<option value="" selected disabled hidden>- Pilih Kategori Terlebih Dahulu -</option>');
        }
    });
});
</script>

关键注意事项 #

• 确认sub_kategori表的关联字段名称，若你的关联字段是kategori_sub_id，需将AJAX方法中的查询条件改为['kategori_sub_id' => $kategori_id]。
• 确保CodeIgniter的URL路由配置正确，base_url('user/get_sub_kategori')需与你的控制器路径匹配（若控制器为User.php，则路径正确）。
• 若页面已加载jQuery，可移除重复引入的jQuery脚本。

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