根据 codeigniter 中第一个选择器的用户输入动态加载第二个 bootstrap 选择器

Question

我想根据第一个selectpicker的输入id从数据库加载数据到第二个selectpicker。第一个selectpicker的数据库id是第二个selectpicker的外键

查看文件

1st selectpicker

<select name="depot_select" id="depot_select" class="selectpicker" data-live-search="true"  value="<?php echo set_value('depot_select');?>">
                            <option value="">No Depot Selected</option>
                            <?php echo $depots['depot'] ?>
</select>

2nd selectpicker

<select class="selectpicker" data-live-search="true" name="route_select" id="route_select" value="<?php echo set_value('route_select');?>">
                            <option value="">No Route Selected</option>
                            <?php echo $routes['route']?>
</select>

Ajax

function fetchDepot(){

        $.ajax({
                    type    :'POST',
                    url     : '<?php echo base_url('transporter_dashboard/bus/get_depots'); ?>',
                    dataType: 'json',
                    success : function(data)
                    {
                         $('#depot_select').empty();               
                         var example =  $('#depot_select').selectpicker('val', data['data']);
                         console.log("depot_select"  + example);

                          if(!$.isEmptyObject(data))
                          {

                             $.each(data, function(i,o)
                            {
                                 var depot = $('#depot_select').append('<option value="'+ o['dpt_id'] +'">'+o['dpt_name'] +' </option>');


                            });


                          }
                       $('#depot_select').selectpicker('refresh');
                       fetchRoute();
                        
                    },
                    error: function()
                    {
                        alert('error occour..........!');
                    }
            });


    }


    function fetchRoute()
      { 

        $.ajax(
        {   
            type    :'POST',
            url     :'<?php echo base_url('transporter_dashboard/bus/get_routes'); ?>',
            data    : { dpt_id : $('#depot_select option:selected').val()},
            dataType: 'json',
            success : function(data)
            {


                $('#route_select').empty();
                 $('#route_select').selectpicker('val', data['data']);

                if(!$.isEmptyObject(data))
                {

                    $.each(data, function(i,o)
                    {
                        var route = $('#route_select').append('<option value="'+ o['rot_id'] +'">'+ o['rot_name'] +'</option>');

        

                    });                      

                }
                
                $('#route_select').selectpicker('refresh');

            },
             error: function(data){

                alert('error occour..........!');

            }

        });
    }

控制器

function get_depots()
{

    echo json_encode($this->bus_model->get_depots());

}

function get_routes()
{
    if ($this->input->post('dpt_id')) 
        {
            echo json_encode($this->bus_model->get_routes($this->input->post('dpt_id')));
        }


}

型号

function get_depots()
    {
        $this->db->select('*');
        $data = $this->db->get('depots')->result_array();
        return $data;
    }

function get_routes($id)
{
     $data = array();
        
        $this->db->select('*');
        $this->db->where('dpt_id',$id);
        $data = $this->db->get('routes')->result_array();

        return $data;

}

根据上面的代码，无论选择什么选项，每次都只有第一个选项的id去后端。然后数据库只加载属于第一个选项的id的数据。

Answer 1

终于，我找到了这个问题的答案。我们需要在 $( document ).ready()

中调用 fetchRoute() 函数

根据 codeigniter 中第一个选择器的用户输入动态加载第二个 bootstrap 选择器

Dynamically load second bootstrap selectpicker based on user input of first selectpicker in codeigniter

javascript

php

ajax

jquery

codeigniter