codeigniter with ajax json_encode not working

Question

i need help please.... the probelm is the codes do nothing, i don't know what the problem

this is my code in View

  <div id="ysfhkm_slc_country">
     <select name="ysfhkm_slc_country" id="">
       <option value="ts1" selected>Test</option>
     </select >
  </div>

 <div id="ysfhkm_slc_negh">
     <select name="ysfhkm_slc_negh" id="">
       <option value="ts1" selected>Test</option>
     </select >
  </div>

 <div id="ysfhkm_slc_city">
     <select name="ysfhkm_slc_city" id="">
       <option value="ts1" selected>Test</option>
     </select >
  </div>

this is my code 'Js' in View

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="application/javascript">

    /* hkm  */
    $(document).ready(function(){   
       $("#ysfhkm_slc_negh select").change(function () {     
            var state_value = $(this).val(); 
            var country_valueee = $("#ysfhkm_slc_country select").val();
            $.ajax({
                url:'https://www*mysite*com/Search_controller/GetCitiesOfState',
                method: 'POST',
                data: {state_val: state_value, country_id: country_valueee},
                dataType: 'json',
                success: function(data){
                    $('#ysfhkm_slc_city select').html(data);

                }
            });
            return false;
        });

        // get states of country
        $("#ysfhkm_slc_country select").change(function () { 
            var country_value = $(this).val(); 
            $.ajax({
                url:'https://www*mysite*com/Search_controller/GetStatesOfCountry',
                method: 'post',
                data: {country_val: country_value },
                dataType: 'json',
                success: function(data){
                    $('#ysfhkm_slc_negh select').html(data);
                    console.log('done');  
                },
                error: function (reponse) {
                    console.log('Problem with ajax');
                }

            });
            $.ajax({
                url:'https://www*mysite*com/Search_controller/GetCitiesOfState',
                method: 'POST',
                data: {state_val: 'ts1', country_id: country_value},
                dataType: 'json',
                success: function(data){
                    $('#ysfhkm_slc_city select').html(data);
                }
            });
            return false;
        });


    });


/* end  hkm  */
</script>

this my Code Search_controller

the probelm is the codes do nothing, i don't know what the problem

i made models codes to comments to testing firt ajax+controller but not working

<?php 

    class Search_controller extends CI_Controller{

        public function index(){


        }



        public function GetCitiesOfState(){
          /* comments
            if($this->input->post('state_val') && $this->input->post('country_id')){
                $postData = $this->input->post('state_val');
                $country_id = $this->input->post('country_id');

                $this->load->model('locationhkm_model');
                $data = $this->locationhkm_model->getUserCitiesOfState($postData,$country_id);
                echo json_encode($data);
            }
            */
              $postData = $this->input->post('state_val');
              $country_id = $this->input->post('country_id');
              $data = '<option value="222">citiessssssss</option>';
              echo json_encode($data);

        }

        public function GetStatesOfCountry(){
          /* comments
            if($this->input->post('country_val')){
                $postData = $this->input->post('country_val');
                $this->load->model('locationhkm_model');
                $data = $this->locationhkm_model->getUserStatesOfCounrty($postData);
                echo json_encode($data);
            }
            */
             $postData = $this->input->post('country_val');
              $data = '<option value="444" >statessssssss</option>';
              echo json_encode($data);
        }


    }


    ?>

Answer 1

The problem is in your controller GetStatesOfCountry function return value. Change it like this

public function GetStatesOfCountry(){
              $postData = $this->input->post('country_val');
              //your logic
              $data['value'] ="444"
              $data['text'] ="statessssssss"
              echo json_encode($data);
        }

Change your URL as

url:"<?php echo base_url()?>index.php/Search_controller/testing_controller",

And inside your ajax success function,

 success: function(data){
     var return = $.parseJSON(data);
     optionText = return.value; 
     optionValue = return.text; 

     $('#ysfhkm_slc_city').append(`<option value="${optionValue}">
        ${optionText} 
     </option>`); 
 }

To append a new option tag to select, you can use

var select = document.getElementById('ysfhkm_slc_city');
var opt = document.createElement('option');
opt.value = return.value;
opt.innerHTML = return.text;
select.appendChild(opt);