Anda mungkin pernah melihat suatu website yang jika penggunanya mengisikan nama provinsi maka kota yang anda dalam provinsi tersebut akan ditampilkan dalam bentuk dropdown menu. Yap, itulah yang akan kita buat pada tutorial php ini yaitu membuat dropdown menu bertingkat yang data provinsi dan kota berasal dari database mysql yang dipanggil menggunakan PHP dengan bantuan Jquery Ajax.
Anda bisa download sourcenya pada akhir tulisan ini. Untuk kasus ini, saya telah menyediakan database yang di dalamnya terdapat tabel provinsi dan kota.
Struktur html untuk menampilkan provinsi pada dropdown menu
<form>
<select id="provinsi" name="provinsi" class="input">
<option value="">-= Pilih Provinsi =-</option>
<?php
$sql_prov = $conn->query("SELECT * FROM prov ORDER by nama_prov ASC");
while ( $r = $sql_prov->fetch_object() ){ ?>
<option value="<?php echo $r->id_prov ?>"> <?= $r->nama_prov ?> </option>
<?php } /* end while */ ?>
</select>
<span id="kota"></span>
</form>
Penjelasan
Pada dropdown provinsi saya memberikan selector bernama ID bernama provinsi. Selector ini nantinya yang akan kita gunakan untuk membuat event change pada jquery (sertakan library jquery: <script src=”jquery-1-10-1.min.js”></script> ).
Kemudian saya mengisi dropdown menunya dengan data provinsi yang diambil dari database mysql (Jangan lupa membuat koneksi ke database, pada kasus ini saya menggunakan koneksi mysqli).
<span id=”kota”></div>, pada tag inilah nantinya pilihan kota akan muncul.
Selanjutnya kita sisipkan jquery yang akan menangani event change pada dropdown provinsi untuk menampilkan dropdown kota/kabupaten.
Setelah ditambahkan jquery maka keseluruhan kode akan seperti berikut ini:
<form>
<select id="provinsi" name="provinsi" class="input">
<option value="">-= Pilih Provinsi =-</option>
<?php
$sql_prov = $conn->query("SELECT * FROM prov ORDER by nama_prov ASC");
while ( $r = $sql_prov->fetch_object() ){ ?>
<option value="<?php echo $r->id_prov ?>"> <?= $r->nama_prov ?> </option>
<?php } /* end while */ ?>
</select>
<span id="kota"></span>
</form>
<script>
$(function(){ // sama dengan $(document).ready(function(){
$('#provinsi').change(function(){
$('#kota').html("<img src='ajax-loader.gif'>"); //Menampilkan loading selama proses pengambilan data kota
var id = $(this).val(); //Mengambil id provinsi
$.get("kota.php", {id:id}, function(data){
$('#kota').html(data);
});
});
});
</script>
Untuk menampilkan data kota berdasarkan provinsi, maka pada kasus ini saya menggunakan jquery get untuk menampilkan dropdown kota/kabupatennya. Setelah proses selesai maka dropdown menu kota/kabupaten akan muncul, $(‘#kota’).html(data); -> artinya isi tag dengan ID kota dengan data yang diambil dari file kota.php.
Nah berikut ini file untuk menampilkan dropdown kotanya:
kota.php
<?php
$conn = new mysqli("localhost","root","","prov_kota");
$id_prov = $_GET[‘id’];
?>
<select name="kota" class="input">
<option value="">-= Pilih Kota/Kabupaten =-</option>
<?php
$sql_kota = $conn->query("SELECT * FROM kabkot WHERE id_prov=’$id_prov’ ORDER by nama_kabkot ASC");
while ( $r = $sql_kota->fetch_object() ){ ?>
<option value="<?php echo $r->id_kabkot ?>"> <?php echo $r->nama_kabkot ?></option>
<?php } /* end while */ ?>
</select>
Sekarang kita sudah selesai membuat dropdown menu bertingkat untuk kasus pilih kota otomatis dengan PHP mysql yang dibantu dengan jquery ajax. Silahkan DOWNLOAD sourcenya pada link di bawah ini. Semoga bermanfaat.
Download
