Ajax Form Provinsi - Kota/Kabupaten - Kecamatan - Kelurahan

<!-- HTML -->
<div class="modal modal-action fade modal-address" style="background:rgba(0,0,0,0.5)" data-backdrop="false">
  <div class="modal-dialog">
    <form class="modal-content form-address">
      <div class="modal-header">
        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
        <h4 class="modal-title">Tambah Alamat Baru</h4>
      </div>
      <div class="modal-body">
        <p>Nama Alamat<br />
        <input type="text" name="addr_label" class="form-control" placeholder="Nama Alamat (Misal: Rumah)" required /></p>
        <p>Nama Penerima<br />
        <input type="text" name="addr_name" class="form-control" placeholder="Nama Penerima" required /></p>
        <p>Nomor Telp/HP<br />
        <input type="tel" name="addr_phone" class="form-control" placeholder="No HP, 08xxx" required /></p>
        <p>Alamat Jalan<br />
        <textarea name="addr_alamat" rows="2" class="form-control" placeholder="Alamat Lengkap" required></textarea></p>
        <p><label for="alamat">Provinsi</label><br />
        <select name="addr_prov" class="provinsi form-control idn" data-target=".block-kota" required><option value="">=Pilih Provinsi=</option><?php
        $prov = $db->query("SELECT idprovinsi,provinsi from tbl_provinsi order by idprovinsi")->results();
        foreach($prov as $p){
            $sel = $p['idprovinsi']==$data['idprovinsi'] ? ' selected' : ($_POST['prov']==$p['idprovinsi'] ? ' selected' : '');
            echo "<option value=\"$p[idprovinsi]\"$sel>$p[provinsi]</option>";
        }
        ?></select></p>
        <div class="row">
            <div class="col-md-6 col-sm-6 col-xs-12 block-kota" style="display:none">
            <p><label>Kota</label><br />
            <select name="kota" class="form-control idn kota" data-target=".block-kecamatan"<?=$disabled?> required><option value="">Pilih Kota</option></select></p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 block-kecamatan" style="display:none">
            <p><label>Kecamatan</label><br />
            <select name="kecamatan" data-target=".block-kelurahan" <?=$disabled?> class="idn kecamatan form-control"><option value="">Pilih Kecamatan</option></select></p>
            </div>
        </div>
        <div class="row block-kelurahan" style="display:none">
            <div class="col-md-6 col-sm-6 col-xs-12">
            <p><label>Desa/Kelurahan</label><br />
            <select name="addr_kelurahan"<?=$disabled?> class="kelurahan form-control"><option value="">Pilih Desa/Kelurahan</option></select></p>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12">
            <p>Kode Pos<br />
            <input type="text" name="addr_pos" minlength="5" maxlength="5" class="form-control" placeholder="Kode Pos" required /></p>
            </div>
        </div>
        <p><label><input type="checkbox" name="utama" value="1" /> Jadikan sebagai alamat utama</label></p>
      </div>
      <div class="modal-footer">
        <input type="hidden" name="pid" value="0" />
        <button type="submit" class="btn btn-primary btn-save-alamat">Simpan</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
      </div>
    </form>
  </div>
</div>





<!-- JavaScript/Ajax -->
$(document).on('change', '.idn', function(){
    var code = $(this).val();
    var targ = $(this).attr('data-target');
    var $this = $(this);
    var arr = {
        provinsi: {
            targ: "kota",
            lbl: "=Pilih Kota/Kabupaten=",
            hide: ["kecamatan", "kelurahan"]
        },
        kota: {
            targ: "kecamatan",
            lbl: "=Pilih Kecamatan=",
            hide: ["kelurahan"]
        },
        kecamatan: {
            targ: "kelurahan",
            lbl: "=Pilih Desa/Kelurahan=",
            hide: []
        }
    }
    var tt = $(this).attr('class').replace('form-control','').replace('idn','')
    tt = tt.replace(/ /g,'');
    targ = '.block-'+arr[tt].targ;
    $(targ).show();
    $(targ).find('select').html('<option value="0">Loading...</option>');
    $.each(arr[tt].hide, function(i, cl){
        $('.block-'+cl).hide();
    });
    $.getJSON('<?=SITE_URI?>member/idn/'+code+'.json', function(res){
        $(targ).find('select').html('<option value="">'+arr[tt].lbl+'</option>');
        $.each(res, function(i, row){
            $(targ).find('select').append('<option value="'+row.kode+'">'+row.nama+'</option>');
        });
        $(targ).find('select').focus();
    });
});

<!-- FORMAT JSON -->
https://prnt.sc/mdmkx0
https://prnt.sc/mdml6n
https://prnt.sc/mdmlkl
https://prnt.sc/mdmltm