combobox berbasis ajax

Saat kita memilih jawa tengah, maka combo kabupaten hanya terisi dengan kabupatend i jawa tengah. Saat kita memilih Yogyakarta, maka kabupaten hanya terisi kabupaten di Yogyakarta dan seterusnya

Kadang data propinsi dan kabupaten di pakai untuk keperluan yang lain yang dipakai bersamaan dalam sebuah form, misalkan kita ingin membuat form pendaftaran mahasiswa. DI form ini ada combo propinsi dan combo kabupaten. Namun combo kabupaten akan tampil sesuai dengan propinsi yang terpilih.
Misalkan di combo propinsi saya memilih Yogyakarta, maka otomatis combo kabupaten hanya terisi data kabupaten di Yogyakarta. Jika saya memilih jawatengah, maka otomatis data combo kabupaten HANYA berisi kabupaten di jawatengah.

Pembahasan artikel ini masih berhubungan dengan pembahasan sebelumnya, jadi sebaiknya anda baca dulu artikel tentangmembuat combobox dinamis dari tabel mysql relasi tabel yang dipakai disini sama dengan relasi tabel di artikel tersebut.

Yang dibutuhkan adalah

File get_kabupaten.php

<?php
include('config.php');
$idpropinsi= $_GET['idpropinsi'];
$hasil = mysql_query("SELECT k.idkabupaten,k.nama 
from propinsi as p,kabupaten as k
  where p.idpropinsi=k.idpropinsi
  and p.idpropinsi='$idpropinsi'");
  
echo "<option>--pilih Kabupaten--</option>";
 
while($k = mysql_fetch_object($hasil)){
   	echo "<option value='$k->idkabupaten'> " . $k->nama ."</option>";
}
?>

Dan jangan lupa tambahkan event change() pada combobox propinsi seperti dibawah ini

<script type="text/javascript">
$(document).ready(function() {
		$("#idpropinsi").change(function() {
			var idprovinsi = $("#idpropinsi").val();
			$.ajax({
				url : "inc/get_kabupaten.php",
				data : "idpropinsi=" + idprovinsi,
				success : function(data) {
					// jika data sukses diambil dari server, tampilkan di <select id=kota>
					$("#idkabupaten").html(data);
				}
			});
		});
	});
</script>

pada combo kabupaten, kosongkan isinya. Kita cukup buat

<select name='idkabupaten'id='idkabupaten' class="required">
					
</select>
Saat kita memilih jawa tengah, maka combo kabupaten hanya terisi dengan kabupatend i jawa tengah. Saat kita memilih Yogyakarta, maka kabupaten hanya terisi kabupaten di Yogyakarta dan seterusnya

Source code
silahkan download source codenya disini

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

2 thoughts on “combobox berbasis ajax”

  1. mas gimana skripnya kalau pilihan combobox 4 pilihan…contoh propinsi, kabupaten, kecamatan dan desa??? jawabannya kirim ke facebook gusti asy-shiddant halaby…

Tinggalin komentar dong!