Codeigniter Select2 On Change For InputBox

Question

I Have Form Select2 dan 2 Form InputBox like this picture

How to load data in InputBox if select2 on change?

View

<div class="form-row">
    <div class="form-group col-md-6">
        <label for="namakapal" class="col-form-label">Nama Kapal</label>
            <select class="form-control" data-toggle="select2" name="nama_kapal">
               <option value="">Pilih Kapal</option>
                    <?php
                        if(!empty($kapal))
                           {
                             foreach ($kapal as $rl)
                               {
                     ?>
      <option value="<?php echo $rl->id ?>"> <?php echo $rl->nama_kapal ?></option>
                <?php
                     }
                         }
                        ?>
        </select>
     </div>
<div class="form-group col-md-3">
    <label for="gt" class="col-form-label">GT</label>
         <input type="number" class="form-control" id="gt" placeholder="GT" required>
</div>
<div class="form-group col-md-3">
    <label for="panjang" class="col-form-label">Panjang Kapal</label>
       <input type="text" class="form-control" id="panjang" placeholder="Panjang Kapal" required>
  </div>
</div> 

Controller

    function tambah_gtkurang()
    {
        
        $this->global['pageTitle'] = 'E-Tambat Labuh : Sistem Informasi Tambat Labuh PPS Kendari';  
        $data['kapal'] = $this->tambat_model->getKapal();      
        $this->loadViews("tambah_gtkurang", $this->global, $data , NULL);
    }

Model

function getKapal() {
     $this->db->select('id, nama_kapal');
     $this->db->from('tbl_kapal');
     $query = $this->db->get();     
     return $query->result(); }

Answer 1

 $(document).ready(function () { $('#changeData').change(function(){ var color = $(this).val(); $('#gt').val(color); $('#panjang').val(color); }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <div class="form-row"> <div class="form-group col-md-6"> <label for="namakapal" class="col-form-label">Nama Kapal</label> <select class="form-control" data-toggle="select2" name="nama_kapal" id="changeData"> <option value="">Pilih Kapal</option> <option data-value="green">green</option> <option data-value="red">red</option> <option data-value="orange">orange</option> <option data-value="black">black</option> </select> </div> <div class="form-group col-md-3"> <label for="gt" class="col-form-label">GT</label> <input type="text" class="form-control" id="gt" placeholder="GT" required> </div> <div class="form-group col-md-3"> <label for="panjang" class="col-form-label">Panjang Kapal</label> <input type="text" class="form-control" id="panjang" placeholder="Panjang Kapal" required> </div> </div>