How to display select option values base on the first option

I am using Codeigniter 3.1.1. I want City option to display base on the value selected with State option. Actually the City select option does not populate automatically when State option is selected. I tried to link the latest jQuery but still, it doesn’t work. Your help is highly appreciated.

MyController.php

class HomeController extends CI_Controller {
public function __construct() { 
  parent::__construct();
  $this->load->database();
}
public function index() {
  $states = $this->db->get("demo_state")->result();
  $this->load->view('myform_view', array('states' => $states )); 
} 
public function myformAjax($stateID) { 
   $result = $this->db->where("state_id",$stateID)->get("demo_cities")->result();
   echo json_encode($result);} }

View:

<select name="state" id="state" class="form-control" style="width:350px">
<option value="">---Select State---</option>
<?php foreach($states as $key => $value) 
{ 
  echo "<option value='".$value->id."'>".$value->name."</option>";
} ?>
</select>
<select name="city" id="city" class="form-control" style="width:350px"></select>

Ajax:

$(document).ready(function() {
    $('select[name="state"]').on('change', function() {
        var stateID = $(this).val();
        if(stateID) {
            $.ajax({
                url: '/MyController/myformAjax/'+stateID,
                type: "POST",
                dataType: "json",
                success:function(data) {
                    $('select[name="city"]').empty();
                    $.each(data, function(key, value) {
                        $('select[name="city"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                    });
                }
            });
        }else{
            $('select[name="city"]').empty();
        }
    });
});

Answer

You’ve not specified what problem you face when you run your code or what is the output or what is the error, so, we’ve no way of knowing what the real issue is. However, I’m sharing a working code (an excerpt from my project) of what you want; I’ve also changed the values according to your needs.

This follows a different approach as AJAX expects HTML to be returned and that HTML is formed in PHP controller rather than on success in jQuery and then simply added to the desired id.

AJAX

$(document).ready(function() {
    $('#state').on('change', function() {
        var stateID = $(this).val();
        if(stateID) {
            $.ajax({
                url: '/MyController/myformAjax/'+stateID, // your-controller-path 
                // sometimes relative path might not work try with base_url() instead or configure your .htaccess properly
                type: "POST",
                dataType: "html", // expecting html
                success:function(data) {
                    $('#city').empty();
                    $('#city').html(data); // change innerHTML of id='city'
                }
            });
        }else{
            $('#city').empty(); // $('#city').html('');
        }
    });
});

Controller

public function myformAjax($stateID) { 
    $cities = $this->db->where("state_id",$stateID)->get("demo_cities")->result(); // get all the cities -- probably want to do this in model

    $cityOpt = '<option value="">--Select City--</option>'; // first option -- to prevent first option from automatically selecting when submitting data
    foreach($cities as $city)
    {
        $cityOpt .= '<option value="'.$city->id.'">'.$city->city_name.'</option>'; // concatenate the next value
    }

    echo $cityOpt;
}

See if it helps you.