动态依赖于Codeigniter的下拉菜单

Question

I am working on a project that uses a dynamic dependent dropdown on codeigniter. I am sorry I am quite new in coding. I have a table that gets the id of a service that is working but getting the other table that is dependent on that service is not working. I used the console tool in google chrome and shows that it gets the option value of the other table but it shows a blank select input in my browser.

shows the option value in my dbase

here is my code: controller:

public function get_procedures()
{
    $servID = $this->input->post('servID');
    $result = $this->Laboratory_Model->get_all_products1($servID);
    if(count($result)>0)
    {
        $pro_select_box = '';
        $pro_select_box .= '<option value="">Select s</option>';
        foreach ($result as $rows) {



         $pro_select_box .='<option value="'.$rows->itemNum.', '.$rows->prodName.' ">'.$rows->prodName.'</option>';
        }
        echo $pro_select_box;
    }
}

js:

       $('#servID').on('change', function(){
            var servID = $(this).val();
            if(servID == '')
            {
                $('#servPRO').attr('disabled', true);
            }
            else
            {
                $('#servPRO').attr('disabled', false);

                $.ajax({
                    url:"<?php echo base_url() ?>get_procedures",
                    type: "POST",
                    data: {'servID' : servID},
                    dataType: 'html',

                    success: function(data){
                       $('#servPRO').html(servID);
                    },
                    error: function(){
                        alert('Error occur...!!');
                    }
                });
            }
       }); 

Laboratory model:

        public function get_all_products1($servID){
    $query = $this->db->get_where('laboratory', array('servID' => $servID));
    if($query->num_rows() > 0){
        return $query->result();
    } else {
        return NULL;
    }
}

views:

    <select name ="servID" id="servID" class="form-control" data-live-search="true">
                      <option value = 'null'>-Select Category-</option>
                          <?php foreach($service as $rows): ?>
                              <option value = '<?php echo $rows->servID?>'><?php echo $rows->service_cat?></option>
                          <?php endforeach ?>
                  </select>
    </select> <select class="form-control"  name="servPRO" id="servPRO">
    </select>

Answer 1

You have mistyped return variable with request parameter on your ajax success method, the supplied variable should be data instead of servID :

$.ajax({
    url:"<?php echo base_url() ?>get_procedures",
    type: "POST",
    data: {'servID' : servID},
    dataType: 'html',

    success: function(data){
       $('#servPRO').html(data); // change servID to data
    },
    error: function(){
        alert('Error occur...!!');
    }
});

Edit

Change the default ServID select

<option value='null'>-Select Category-</option>

to

<option value=''>-Select Category-</option>

because 'null' is not equal to '' .

And set initial state of the dropdown :

$('#servPRO').attr('disabled', $('#servID').val() == '' ? true : false ); // set initial state

$('#servID').on('change', function(){
    var servID = $(this).val();
    if(servID == '')
    {
        $('#servPRO').attr('disabled', true);
    }
    else
    {
        $('#servPRO').attr('disabled', false);

        $.ajax({
            url:"<?php echo base_url() ?>get_procedures",
            type: "POST",
            data: {'servID' : servID},
            dataType: 'html',

            success: function(data){
               $('#servPRO').html(data); // changed servID to data
            },
            error: function(){
                alert('Error occur...!!');
            }
        });
    }
});