【问题标题】:ajax select data with multiple related dataajax选择具有多个相关数据的数据
【发布时间】:2020-07-20 03:54:20
【问题描述】:

我想显示从 db 循环的复选框,如果我尝试在字段中选择数据 id_kendaraan 然后显示来自该 id 的数据。

这是我的视图代码:

<div class="modal fade" id="tambah" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3 class="modal-title" id="myModalLabel">Tambah Pemeliharaan</h3>
            </div>
            <form class="form-horizontal" method="post" action="<?php echo base_url()?>Data/Pemeliharaan/Tambah">
                <div class="modal-body">
                    <div class="form-group">
                    <label class="control-label col-xs-3">Nama Kendaraan</label>
                        <div class="col-xs-8">
                            <select class="form-control"  name="id_kendaraan" id="id_kendaraan" required>
                            <option>Pilih Kendaraan</option>
                            <?php
                            if(!empty($kendaraan_)) {
                            foreach ($kendaraan_ as $isi) {
                            ?>
                            <option value="<?php echo $isi['id_kendaraan']?>"><?php echo $isi['nama']?> - <?php echo $isi['platno']?></option>
                            <?php }} ?>
                            </select>
                        </div>
                    </div>
                    <?php
                    $index =0;          
                    foreach ($subkriteria_ as $kr_key => $kriteria) {
                    ?>
                    <div class="form-group">
                        <label class="control-label col-xs-3"><?php echo $kriteria['nama_kriteria'] ?></label> 
                        <div class="col-xs-8">
                                <input type="hidden" name="status_pemeliharaan" value="1" class="form-control">
                                <input type="hidden" name="id_kriteria[]" value="<?php echo $kriteria['id_kriteria'] ?>" class="form-control">  
                            <?php if(!empty($kriteria['sub'])) { ?> 
                            <select class="form-control"  name="isi_kriteria[]" required>
                                <option>Pilih Sub Kriteria</option>
                                <?php $no = 1; foreach ($kriteria['sub'] as $data)     { ?>
                                <option value="<?php echo $data['value'] ?>"><?php echo $data['namasubkriteria'] ?> - <?php echo $data['value'] ?></option>
                                <?php  $no++; } ?>
                            </select>
                            <?php } else if($kriteria['link']=='tahun_beli') { ?>
                                <input name="isi_kriteria[]" value="" class="form-control" type="text" placeholder="Isi Kriteria..." readonly required>
                            <?php } else { ?>
                                <input name="isi_kriteria[]" value="" class="form-control" type="number" placeholder="Isi Kriteria..." required>
                            <?php } ?>
                        </div>
                    </div>
                    <?php } ?>
                    <div class="form-group">
                        <label class="control-label col-xs-3"></label>
                        <div class="col-xs-8">
                            <ul id="sparepartList" style="list-style-type: none; padding: 0;"></ul>
                        </div>
                    </div>
                </div> 
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Tutup</button>
                    <button class="btn btn-info">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
$(document).ready(function(){
        $('#id_kendaraan').on('input',function(){
            
        var id_kendaraan=$(this).val();
        $.ajax({
            type : "POST",
            url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
            dataType : "JSON",
            data : {id_kendaraan: id_kendaraan},  
            cache:false,
            success: function(data){
                $('#sparepartList').empty(); // clear all sparepart checkboxes
                $.each(data, function(id_kendaraan, tahun_beli, id_jenis){
                    $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                    $('[name="id_jenis"]').val(data.id_jenis);
                    $.each(data.spareparts, function (key, value) {
                        let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                        $('#sparepartList').append(li);
                    });
                });
                    
            }
        });
        return false;
    });
});
</script>

我的控制器:

function GetKendaraanById(){
        $id_kendaraan=$this->input->post('id_kendaraan');
        $data=$this->PemeliharaanModel->GetById($id_kendaraan);
        echo json_encode($data);
      }

我从视图 $id_kendaraan 获取数据作为我的参数。

这是我的模特:

function GetById($id_kendaraan){
    $this->db->select('*');
    $this->db->from('tb_kendaraan');
    $this->db->where('tb_kendaraan.id_kendaraan',$id_kendaraan);
    $query_kendaraan = $this->db->get();
    $hasil = false;
    if($query_kendaraan->num_rows() > 0)
    {
        $data_kendaraan = $query_kendaraan->row();
        $hasil = [
            'tahun_beli' => $data_kendaraan->tahun_beli,
            'id_jenis' => $data_kendaraan->id_jenis,
            'spareparts' => [] // empty array, to be filled with spareparts data
        ];
        $this->db->select('*');
        $this->db->from('tb_sparepart');
        $this->db->where('tb_sparepart.id_jenis', $data_kendaraan->id_jenis);
        $query_sparepart = $this->db->get();
        
        foreach ($query_sparepart->result() as $data_sparepart) {
            $spareparts = [
                'id_sparepart' => $data_sparepart->id_sparepart,
                'sparepart' => $data_sparepart->sparepart,
            ];
            array_push($hasil['spareparts'], $spareparts);
        }
    }
    return $hasil;
}

但如果我尝试此代码,字段 tahun_beli,id jenis 将成功显示在视图中。但备件中的复选框被夸大了。

我试试json,数据是正确的,显示tahun_beliid_jenis,是显示和sparepart是id_jenis显示

但鉴于我尝试此代码...tahun_beliid_jenis 是正确的显示一个数据,但sparepart 正在循环 3 次.. 备件应该显示数据 1 次...

【问题讨论】:

    标签: php json ajax loops codeigniter


    【解决方案1】:

    我检查了你的代码,我认为问题出在这个:

    <script type="text/javascript">
    $(document).ready(function(){
            $('#id_kendaraan').on('input',function(){
                
            var id_kendaraan=$(this).val();
            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
                dataType : "JSON",
                data : {id_kendaraan: id_kendaraan},  
                cache:false,
                success: function(data){
                    $('#sparepartList').empty(); // clear all sparepart checkboxes
                    $.each(data, function(id_kendaraan, tahun_beli, id_jenis){
                        $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                        $('[name="id_jenis"]').val(data.id_jenis);
                        $.each(data.spareparts, function (key, value) {
                            let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                    '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                            $('#sparepartList').append(li);
                        });
                    });
                        
                }
            });
            return false;
        });
    });
    </script>

    尝试删除第一个$.each,你的代码会是这样的

    <script type="text/javascript">
    $(document).ready(function(){
            $('#id_kendaraan').on('input',function(){
                
            var id_kendaraan=$(this).val();
            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('Data/Pemeliharaan/GetKendaraanById')?>",
                dataType : "JSON",
                data : {id_kendaraan: id_kendaraan},  
                cache:false,
                success: function(data){
                    $('#sparepartList').empty(); // clear all sparepart checkboxes
                    
           $('[name="isi_kriteria[]"]').val(data.tahun_beli);
                        $('[name="id_jenis"]').val(data.id_jenis);
                        $.each(data.spareparts, function (key, value) {
                            let li = $('<li><input type="checkbox" name="id_sparepart[]" value="' + value.id_sparepart + '" />' +
                                    '<input type="text" name="sparepart" value="' + value.sparepart + '" /></li>');
                            $('#sparepartList').append(li);
                        });
                }
            });
            return false;
        });
    });
    </script>

    希望它有效

    【讨论】:

    • 很高兴帮助兄弟。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-07-30
    • 2010-12-31
    • 2023-02-05
    • 2010-09-29
    • 2020-01-06
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多