Bdtjtk

I am working on project that uses a dynamic or dependent dropdown list on CodeIgniter. This is my noob logic, the country value from Views passed to Models, then the Models get state data with same country value from Views, then Controllers get state data from that Models and pass it again to Views. And the problem is the state dropdown list show nothing.
Sorry, iam new in coding.

//This is the Controllers (Pkl.php)

$data['all_country'] = $this->Server_Model->get_country_model();

$data['all_state'] = $this->Server_Model->get_state_model();

$this->load->view('contents/page_dashboard', $data);



//This is the Models (Server_Model.php)

function get_country_model(){

            $db_jarlap = $this->load->database('gis_bali', TRUE);

            $db_jarlap->select("*");

            $db_jarlap->from("country");

            $que = $db_jarlap->get();

            return $que->result();

        }

function get_state_model(){

            $kakakoko = filter_input(INPUT_POST, 'country_id');

            $db_jarlap = $this->load->database('gis_bali', TRUE);

            $db_jarlap->select("*");

            $db_jarlap->from("state");

            $db_jarlap->where(" id_country = $kakakoko ");

            $que = $db_jarlap->get();

            return $que->result();

        }



//This is the Views Content (page_dashboard.php)

<script src="<?php echo base_url() ?>resources/js/jquery-3.3.1.min.js"</script>

<script>

            $(document).ready(function(){

            $('#formCountry').change(function(){

                  var country_id = $(this).val();



                  $.ajax({

                            url: "<?php echo base_url() ?            >application/models/Server_Model.php",

                        method: "POST", 

                        data: {country_id:country_id}, 

                        success: function(data) { 

                        $('#formState').html(data);

                                            }

                                    });

                                });

                            });

</script>



<select name="formCountry" id="formCountry">

<?php foreach($all_country as $semua_country): ?>

<option value="<?php echo $semua_country->id_country; ?>"><?php echo     $semua_country->nama_country; ?></option>

<?php endforeach; ?>

</select>



<select name="formState" id="formState" >

<?php foreach($all_state as $semua_state): ?>

<option value="<?php echo $semua_state->id_state; ?>"><?php echo $semua_state->nama_state; ?></option>

<?php endforeach; ?>

</select>

Thanks for your help.

You should not directly call model, instead call the Pkl controller, I'm assuming that you are using the index() method on Pkl controller :

$(document).ready(function () {

    $('#formCountry').change(function () {

        var country_id = $(this).val();



        $.ajax({

            url: "<?php echo base_url() ?>pkl", // using Pkl controller

            method: "POST",

            data: {

                country_id: country_id

            },

            success: function (data) {

                $('#formState').html(''); // empty the select option element

                $.each(data, function(){ // format each option returned from Pkl controller

                    $("#formState").append('<option value="'+ this.id_state +'">'+ this.nama_state +'</option>');

                });

            }

        });

    });

});