Tutorial PHP : Cara membuat combobox dinamis [Ajax]

Combobox dinamis, tahukan apa yang saya maksud .?  contohnya adalah seperti ini :

cara-membuat-combobox-dinamis

cara membuat combobox dinamis

Gambar diatas adalah contoh tentang combobox dinamis. Misalnya ketika kita memilih propinsi Jawa Barat, maka combobox kota akan menampilkan kota-kota yang hanya ada di Jawa Barat. Ketika propinsi yang dipilih Jawa Tengah, maka combobox kota akan menampilkan kota yang berada di Jawa Tengah, begitu juga seterusnya.

Untuk keperluan latihan ini, siapkan dua tabel seperti berikut :
tabel propinsi

field type
id_propinsi int
nama_propinsi varchar(25)

tabel kota

field type
id_kota int
nama_kota varchar(25)
id_propinsi int

Isilah tabel-tabel tersebut. misalnya seperti berikut :

id_propinsi nama_propinsi
1 Jawa Barat
id_kota nama_kota id_propinsi
1 Bandung 1
2 Sumedang 1

Hmm.., apa selanjutnya yang mesti kita lakukan .? Contoh data sudah dibuat, yu mari kita koding.

<form>Propinsi :
<select name="propinsi">
      <option value="">-- Select Province --</option>
      <?php while ($row = mysql_fetch_array($query)) : ?>
       <option value="<?php echo $row['id_provinsi">
           <?php echo $row['nama_propinsi'] ?>
       </option>
      <?php endwhile; ?>
</select>
Kota :
<select id="city" name="kota">
      <!-- biarkan ini kosong, karena akan di isi secara dinamis -->
      <option value="">-- Select City --</option>
</select>
</form>

Selanjutnya, pada bagian heading atau sebelum tag Tambahkan kode javascript seperti berikut :

<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">
$(document).ready(function(){
		$('#province').change(function(){
			// get province's value
			var province_id = $(this).val();
			// request to server with ajax
			$.get(
				'php-resource.php',
				{province_id : province_id},
				function(data){
					console.log(data);
					$('#city').html("

<option value=''>-- Select City --</option>

");
					$.each(data,function(idx, val){
						var opt = "

<option value='"+ val.id + "'>"+ val.name + "</option>

";
						$('#city').append(opt);
					});
				},
				'json'
			);
		});
	});
   </script>

Selanjutnya, kita buat file untuk memperoses request ajax dan mengirimkan hasilnya. Buatlah satu file lagi, berinama php-resource.php.

php-resource.php

$province_id = $_GET['province_id'];
$query = mysql_query("SELECT * FROM cities WHERE province_id = '{$province_id}'");
$cities = array();
if ($query) {
	while ($city = mysql_fetch_object($query)){
		$data = array(
			'id' => $city->id,
			'name' => $city->city_name
		);
		array_push($cities, $data);
	}
}
else {
	$cities = array('error' => 'cannot find cities with province_id '.$province_id);
}

echo json_encode($cities);

About Atang Sutisna

I'm a web developer at Bippo and Berbatik.com
This entry was posted in PHP and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>