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

我想根据第一个选择器的输入id将数据从数据库加载到第二个选择器。在数据库中，第一个选择器的id是第二个选择器的外键

查看文件

第一选择器

模型

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

---

最后，我找到了这个问题的答案。我们需要在

$（文档）中调用
fetchRoute（）
函数。我们需要在
$（文档）中调用
fetchRoute（）
函数。ready（）
您是否尝试过这样的
$（“#仓库_选择”）.val（）
？您是否尝试过这样的
$（“#仓库_选择”）.val（）
？
<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>

<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>

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;

}