Jika kita memiliki data yang saling terhubung pada database kita. Misalkan seperti contoh data kelurahan. Data tersebut tentu berhubungan dengan data kecamatan. Sebuah kecamatan bisa memiliki beberapa kelurahan. Nah untuk memudahkan filter data jika kita memilih sebuah kecamatan, maka yang akan muncul hanya data kelurahan dari kecamatan tersebut. Berikut dibawah ini script pada Codeigniternya.
- Controller :
function index(){
$data['kecamatan'] = $this->model_usaha->get_kecamatan()->result();
$this->load->view('usaha', $data);
}
function get_sub_kecamatan(){
$id_kec = $this->input->post('id',TRUE);
$data = $this->model_usaha->get_kelurahan($id_kec)->result();
echo json_encode($data);
}
- Model :
function get_kecamatan(){
$query = $this->db->get('kecamatan');
return $query;
}
function get_kelurahan($id_kec){
$query = $this->db->get_where('kelurahan', array('id_kec' => $id_kec));
return $query;
}
- View :
<div class="form-group">
<label>Nama Kecamatan <small class="font-italic">(wajib dipilih)</small></label>
<select class="form-control" name="" id="kecamatan" required>
<option value="">No Selected</option>
<?php foreach($kecamatan as $kec):?>
<option value="<?php echo $kec->id_kec;?>"><?php echo $kec->nama;?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label>Nama Desa/Kelurahan <small class="font-italic">(wajib dipilih)</small></label>
<select class="form-control" id="kelurahan" name="sub_category" required>
<option>No Selected</option>
</select>
<div id="loading" style="margin-top: 15px;">
<img src="<?php echo site_url('images/icon/loading.gif');?>" width="18"> <small>Loading...</small>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#loading").hide();
$('#kecamatan').change(function(){
$("#kelurahan").hide(); // Sembunyikan select kelurahan
$("#loading").show(); // Tampilkan image loading.gif
var id=$(this).val();
$.ajax({
url : "<?php echo site_url('usaha/get_sub_kecamatan');?>",
method : "POST",
data : {id: id},
async : true,
dataType : 'json',
success: function(data){
$("#loading").hide(); // Sembunyikan image loading.gif
$("#kelurahan").show(); // Tampilkan select kelurahan
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<option value='+data[i].id_kel+'>'+data[i].nama+'</option>';
}
$('#kelurahan').html(html);
}
});
return false;
});
});
</script>