Codeigniter Select2 更改输入框答案

【问题标题】：Codeigniter Select2 On Change For InputBoxCodeigniter Select2 更改输入框
【发布时间】：2021-05-25 13:07:05
【问题描述】：

我有像这张图一样的 Form Select2 和 2 Form InputBox

如果 select2 发生变化，如何在 InputBox 中加载数据？

查看

<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>

控制器

    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);
    }

型号

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

【问题讨论】：

到目前为止，您尝试过什么来执行 onchange 逻辑？
此时只能在select2中加载数据，但是不明白如何在输入框中显示
请展示您的表格结构。
i.ibb.co/jrzXP1D/table.jpg 这是我的桌子

标签： javascript php html forms codeigniter

【解决方案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>

【讨论】：