Show sub-options based on selected main option in Codeigniter by ajax

Question

I would like when I select the cats option that only the breed of cats appears, such as the Siamese example. If I select dog, I only want to get the breed of dogs, such as Pitbull and others.

Can you help me with the code, it tells me to use jquery, but how is it done I am just learning?

<div class="form-group">
    <div class="row">
        <div class="col-12 col-sm-6">
            <label for="especie">Especie</label>
            <select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
                <option value="">Seleccionar especie</option>
                <?php foreach ($especie as $row) {?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
                <?php }?>
            </select>
        </div>
        <div class="col-12 col-sm-6">
            <label for="raza">Raza</label>
            <select class="form-control" id="id_raza" name="id_raza">
                <option value="">Seleccionar raza</option>
                <?php foreach ($raza as $row) {?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
                <?php }?>
            </select>
        </div>
    </div>
</div>

Answer 1

According to your Question you want Dynamic dependant drop down list in codeigniter with ajax / jQuery.

PHP VIEW :

<div class="col-12 col-sm-6">
        <label for="especie">Especie</label>
        <select class="form-control" id="id_especie" name="id_especie" value="data-id-especie=">
            <option value="">Seleccionar especie</option>
            <?php foreach ($especie as $row) {?>
                <option value="<?php echo $row['id']; ?>"><?php echo $row['nombre']; ?></option>
            <?php }?>
        </select>
    </div>

<div class="col-12 col-sm-6">
        <label for="raza">Raza</label>
        <select class="form-control" id="id_raza" name="id_raza">
         <!-- Data here will be auto populated by ajax -->

            </select>
    </div>

Controller :

public function get_data()
           {
                $id_especie = $this->input->post("id_especie");
     $SUbCatdata = $this->db->get_where('tableName',array('id'=>$id_especie))->result_array();
            $option ="<option selected disabled value=''>Select Name</option>";
              foreach($SUbCatdata as $row)
              {
                 $option.="<option value='".$row['id']."'>".$row['nombre']."</option>";
              }
               echo $option;
           }

jQuery / Ajax :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
    $(document).ready(function() {
        $("#id_especie").on("change",function(){
        var id_especie = $(this).val();
     
        $.ajax({
             url : "<?php echo base_url('Controller/get_data') ?>",
             type: "post",
             data: {"id_especie":id_especie},
             success : function(data){
                //alert(data);
        $("#id_raza").html(data);
             }
        });
    });
    
    </script>   
        

Note : For more info regarding change()

https://api.jquery.com/change