i want to make a chained dropdown

hi guys i want to make the chained drop down by using ajax, i have a code but only work when i set the id, when im not set the id that's only showing data at the first dropdown and the next dropdown doesnt show a data

example :
<?php echo combo_provinsi(isset($ongkir['id_provinsi']) ? $ongkir['id_provinsi'] :  1 //the chained dropdown is work when i set this number, number 1 is a meaning of id provinsi  ) ?>

The question is how to make chained drop down without set the id like my code ?, i want chained dropdown is work by selected dropdown without set the id before

here's my full code

VIEW

Code:

<?php echo form_open($form_post_url, array('class'=>'form-horizontal','role'=>'form')); ?>
               <div class="card-body">
                 <div class="form-group">
                   <label for="id_provinsi">Provinsi</label>
                   <?php echo combo_provinsi(isset($ongkir['id_provinsi']) ? $ongkir['id_provinsi'] : 1) ?>
                 </div>
                 <div class="form-group">
                   <label for="id_kabupaten">Kota / Kabupaten</label>
                   <select name="id_kabupaten" id="id_kabupaten" class="form-control">
                     <option value="">-- Pilih Kota / Kabupaten --</option>
                   </select>
                 </div>
                 <div class="form-group">
                   <label for="id_kecamatan">Kecamatan</label>
                   <select name="id_kecamatan" id="id_kecamatan" class="form-control">
                     <option value="">-- Pilih Kecamatan --</option>
                   </select>
                   <?php echo form_error('id_kecamatan') ?>
                 </div>
                 <div class="form-group">
                   <label for="biaya">Biaya Kirim Per Kg</label>
                   <input type="text" name="biaya" id="biaya" class="form-control" placeholder="Tulis Biaya Kirim" value="<?php echo isset($ongkir['biaya']) ? $ongkir['biaya'] : '' ?>">
                   <?php echo form_error('biaya') ?>
                 </div>
               </div>
               <!-- /.card-body -->
               <div class="card-footer">
                 <input type="hidden" name="submit">
                 <input type="hidden" name="id_ongkir" value="value="<?php echo isset($ongkir['id_ongkir']) ? $ongkir['id_ongkir'] : '' ?>"">
                 <button type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Simpan</button>
                 <button type="button" onclick="window.history.back()" class="btn btn-default"><i class="fa fa-rotate-left"></i> Batal</button>
               </div>
             </form>
           </div>
           <!-- /.card -->
     </div>
     <!-- /.row (main row) -->
   </div><!-- /.container-fluid -->
 </section>
 <!-- /.content -->
</div>

<script>

 function get_kabupaten(id_prov, sel) {
   $.ajax({
     url: '<?php echo base_url() ?>ajax/get_kabupaten',
     type: 'POST',
     dataType: 'html',
     data: {
       id_provinsi: id_prov,
       selected: sel
     },
     success: function(data) {
       $("#id_kabupaten").html(data);
     }
   });
 }

 function get_kecamatan(id_kab, sel) {
   $.ajax({
     url: '<?php echo base_url() ?>ajax/get_kecamatan',
     type: 'POST',
     dataType: 'html',
     data: {
       id_kabupaten: id_kab,
       selected: sel
     },
     success: function(data) {
       $("#id_kecamatan").html(data);
     }
   });
 }
 <?php if ($title = 'Tambah Biaya Kirim'): ?>
 get_kabupaten($("#id_provinsi").val(), 0);  
 <?php else: ?>

 <?php endif ?>

 <?php if (isset($ongkir['id_kecamatan'])): ?>
     $.ajax({
       url: '<?php echo base_url() ?>ajax/get_kabupaten',
       type: 'POST',
       dataType: 'html',
       data: {
         id_provinsi: $("#id_provinsi").val(),
         selected: <?php echo $ongkir['id_kabupaten'] ?>
       },
       success: function(data) {
         $("#id_kabupaten").html(data);
         get_kecamatan(<?php echo $ongkir['id_kabupaten'] ?>, <?php echo $ongkir['id_kecamatan']!='' ? $ongkir['id_kecamatan'] : 0  ?>);
       }
     });
 <?php endif ?>
 
 $("#id_kabupaten").change(function() {
   get_kecamatan($(this).val(), '');
 });
</script>

AJAX Controller

Code:

public function get_kabupaten()
    {
        if(isset($_POST['id_provinsi']) && isset($_POST['selected']))
        {
            $id_provinsi = $this->input->post('id_provinsi');
            $selected      = $this->input->post('selected');
            
            if($id_provinsi != '')
                $data = $this->alamat->get_kabupaten_by_idprovinsi($id_provinsi);
            
            if($data)
            {
                echo '<option value="">-- Pilih Kota / Kabupaten --</option>';
                foreach ($data as $r) {
                    $sel = '';

                    if($r->id_kabupaten == $selected)
                        $sel = 'selected';
                    echo "<option value='".$r->id_kabupaten."' ".$sel.">".$r->nama_kabupaten."</option>";
                }
            }
            else
            {
                echo '<option value="">-- Pilih Kota / Kabupaten --</option>';
            }
            
        }
    }

    public function get_kecamatan()
    {
        if(isset($_POST['id_kabupaten']) && isset($_POST['selected']))
        {
            $id_kabupaten = $this->input->post('id_kabupaten');
            $selected       = $this->input->post('selected');
            if ($id_kabupaten != '')
                $data = $this->alamat->get_kecamatan_by_idkabupaten($id_kabupaten);
    
            if($data)
            {
                echo '<option value="">-- Pilih Kecamatan --</option>';
                foreach ($data as $r) {
                    $sel = '';
                    if($r->id_kecamatan == $selected)
                        $sel = 'selected';
                    echo "<option value='".$r->id_kecamatan."' ".$sel.">".$r->nama_kecamatan."</option>";
                }
            }
            else
            {
                echo '<option value="">-- Pilih Kecamatan --</option>';
            }    
        }
    }

    public function get_kecamatan_byid()
    {
        $data = $this->alamat->get_kecamatan_full($this->input->post('id_kecamatan'));
        echo json_encode($data);
    }

}

Check this line of code:

PHP Code:

<?php if ($title = 'Tambah Biaya Kirim'): ?>

You are making a common mistake here. The if statement will always evaluate as TRUE, unless you change it into:

PHP Code:

<?php if ($title == 'Tambah Biaya Kirim'): ?>

Another thing: at the end of the javascript in the view you have:

Code:

$("#id_kabupaten").change(function() {
  get_kecamatan($(this).val(), '');
});

The get_kecamatan() function is expecting the selected item als second parameter, right? In your case, it's always an empty string. I can't judge if that's causing the problem, but it's worth looking at.

Check this line of code:

PHP Code:

<?php if ($title = 'Tambah Biaya Kirim'): ?>

You are making a common mistake here. The if statement will always evaluate as TRUE, unless you change it into:

PHP Code:

<?php if ($title == 'Tambah Biaya Kirim'): ?>

Another thing: at the end of the javascript in the view you have:

Code:

$("#id_kabupaten").change(function() {
  get_kecamatan($(this).val(), '');
});

The get_kecamatan() function is expecting the selected item als second parameter, right? In your case, it's always an empty string. I can't judge if that's causing the problem, but it's worth looking at.

i just want to ask why dropdown kabupaten have been empty,when im not set the id provinsi in dropdown provinsi. but when i set the id the data will be show

PHP Code:

<?php echo form_open($form_post_url, array('class'=>'form-horizontal','role'=>'form')); ?>
                <div class="card-body">
                  <div class="form-group">
                    <label for="id_provinsi">Provinsi</label>
<?php echo combo_provinsi(isset($ongkir['id_provinsi']) ? $ongkir['id_provinsi'] : '')<<< this not set
                    
                     ?>
                  </div>
<div class="form-group">
                    <label for="id_kabupaten">Kota / Kabupaten</label>
                    <select name="id_kabupaten" id="id_kabupaten" class="form-control"> << this will be no data
                      <option value="">-- Pilih Kota / Kabupaten --</option>
                    </select>
                  </div> 


Your function get_kabupaten() says this:

PHP Code:

if($id_provinsi != '') $data = $this->alamat->get_kabupaten_by_idprovinsi($id_provinsi);

if($data) 
{
 echo '<option value="">-- Pilih Kota / Kabupaten --</option>';
 foreach ($data as $r) {
 $sel = '';

 if($r->id_kabupaten == $selected)
 $sel = 'selected';
 echo "<option value='".$r->id_kabupaten."' ".$sel.">".$r->nama_kabupaten."</option>";
 }
}
else
{
 echo '<option value="">-- Pilih Kota / Kabupaten --</option>';
} 


So, it's only fetching data (from a model?) if id_provinsi has a value. If not, it will only output "<option value="">-- Pilih Kota / Kabupaten --</option>"