Home > Ajax, JQuery, PHP > Membuat ComboBox Dinamis Dengan JQuery

Membuat ComboBox Dinamis Dengan JQuery

February 21st, 2010 2,907 views Leave a comment Go to comments

ComboBox atau element Select pada halaman website adalah elemen form yang sangat berguna untuk melakukan pemilihan data. Namun seringkali terjadi kesalahan pemilihan data seperti ketika memilih propinsi pada suatu pulau, malah memilih propinsi di pulau lainnya. Oleh karena itu combobox harus di design secara baik agar dapat mengurangi kesalahan input user.

Berikut adalah teknik untuk mendesign ComboBox dinamis dalam kasus pemilihan data lokasi.

Pada gambar diatas apabila ComboBox pulau dipilih maka JavaScript akan mengambil data propinsi yang berada pada pulau tersebut lalu menampilkannya ke dalam pilihan ComboBox propinsi, begitu juga pada saat ComboBox propinsi dipilih maka akan mengubah isi ComboBox kabupaten / kota.

Berikut adalah relasi table untuk membuat program ini:

Dan ini adalah penggalan JavaScript untuk load data dengan Ajax dan menampilkannya pada ComboBox:

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function loadData(type,parentId){
  // berikan kondisi sedang loading data ketika proses pengambilan data
  $('#loading').text('Loading '+type.replace('_','/')+' data...');
     $.post('load_data.php', // request ke file load_data.php
	{data_type: type, parent_id: parentId},
	function(data){
	  if(data.error == undefined){ // jika respon error tidak terdefinisi maka pengambilan data sukses 
		 $('#combobox_'+type).empty(); // kosongkan dahulu combobox yang ingin diisi datanya
		 $('#combobox_'+type).append('<option>-Pilih data-</option>'); // buat pilihan awal pada combobox
		 for(var x=0;x<data.length;x++){
			// berikut adalah cara singkat untuk menambahkan element option pada tag <select>
		 	$('#combobox_'+type).append($('<option></option>').val(data[x].id).text(data[x].nama));
		 }
		 $('#loading').text(''); // hilangkan text loading
	  }else{
		 alert(data.error); // jika ada respon error tampilkan alert
	  }
	},'json' // format respon yang diterima langsung di convert menjadi JSON 
     );      
  }
  $(function(){
   // pertama kali halaman di-load, maka ambil seluruh data pulau 
   loadData('pulau',0); 
   // fungsi yang dipanggil ketika isi dari combobox pulau dipilih 
   $('#combobox_pulau').change( 
		function(){
			// apabila nilai pilihan tidak kosong, load data propinsi
			if($('#combobox_pulau option:selected').val() != '')
				loadData('propinsi',$('#combobox_pulau option:selected').val());
		}
   );
   // fungsi yang dipanggil ketika isi dari combobox propinsi dipilih 
   $('#combobox_propinsi').change(
		function(){
			// apabila nilai pilihan tidak kosong, load data kabupaten/kota
			if($('#combobox_propinsi option:selected').val() != '')
				loadData('kabupaten_kota',$('#combobox_propinsi option:selected').val());
		}
   );
  });

Dan untuk script PHP yang menerima request dari Ajax tidak begitu rumit:

// proses akan berjalan ketika ada inputan data_type dan parent_id berupa POST
if(isset($_POST['data_type']) && isset($_POST['parent_id'])){
	$data_type = $_POST['data_type'];
	$parent_id = $_POST['parent_id'];
	/* Custom SQL Query per masing-masing request.
	 * setiap field di beri alias id dan nama agar proses di javascript tidak direpotkan
	 * oleh penamaan field yang berbeda per tiap jenis data.
	 * */
	switch($data_type){
		case 'kabupaten_kota': 
			$sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_$data_type WHERE propinsi_id = '$parent_id'"; break;
		case 'propinsi': 
			$sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_$data_type WHERE pulau_id = '$parent_id'"; break;
		case 'pulau':
		default:
			$sql = "SELECT id_$data_type id, nama_$data_type nama FROM peta_pulau";
	}
	mysql_connect('localhost','root','') or die(mysql_error()); // koneksi ke server database
	mysql_select_db('test')or die(mysql_error()); // pilih database
 
	$response = array(); // siapkan respon yang nanti akan di convert menjadi JSON
	$query = mysql_query($sql);		
	if($query){
		if(mysql_num_rows($query) > 0){
			while($row = mysql_fetch_object($query)){
				// masukan setiap baris data ke variable respon
				$response[] = $row; 
			}
		}else{
			$response['error'] = 'Data kosong'; // memberi respon ketika data kosong
		}
	}else{
		$response['error'] = mysql_error(); // memberi respon ketika query salah
	}
	die(json_encode($response)); // convert variable respon menjadi JSON, lalu tampilkan 
}

PHP memberi respon berupa JSON agar lebih mudah di proses di JavaScript.

Demo dari program ini: DEMO

Download program ini: DOWNLOAD

Semoga bisa bermanfaat dan menjawab semua pertanyaan para pengunjung sekalian… ^_^

Categories: Ajax, JQuery, PHP Tags: , , ,
(11 votes, average: 3.91 out of 5) KurangBiasaLumayanBagusLuar Biasa
Loading ... Loading ...
  1. February 21st, 2010 at 13:46 | #1

    hebat… sangat produktif

  2. didin nurdiansyah
    February 21st, 2010 at 16:16 | #2

    hehehee,,makasih mas dah dibuatin artikelnya

  3. February 23rd, 2010 at 11:17 | #3

    sangat bagus mas artikel di sitemu, numpang sedot mas

  4. hari
    April 21st, 2010 at 11:11 | #4

    sip artikelnya, coba deh

  5. tomi
    April 21st, 2010 at 17:24 | #5

    siip banget artikelnya..
    sangat bemnfaat

  6. April 30th, 2010 at 00:48 | #6

    makasih banget..sangat ngebantu..
    oiy..klo buat di form editnya gmna ya??
    kn nilai di combobox harus udah ada dulu??
    mohon bantuannya.. :D

  7. irfan
    May 18th, 2010 at 02:38 | #7

    mas kok saya implementasikan di themes wordpress ga bisa y..??

    mohon bantuannya… :D :D

  8. May 24th, 2010 at 00:13 | #8

    kalo misalkan kita pilih jawa->jawa barat->bandung trus pengen nampilin data yang ada di bandung tapi bukan berupa combo box lagi gimana ya??

    mohon pencerahan nya..

  9. June 4th, 2010 at 11:00 | #9

    berarti ada 3 kali gunakan ajax disini.
    di script saya cuma ada 2 kali nge-load ajax, ketika combo terakhir kasih event onChange aja lagi lalu load data dari bandung berdasar id yg dipilih.

  10. June 4th, 2010 at 11:52 | #10

    memang mau buat apa di wordpress? ini memang dibuat khusus utk form2 standar di aplikasi, bukan di wordpress

  11. June 4th, 2010 at 12:44 | #11

    form editnya saya gak sediain. di artikel ini cuma untuk cara menampilkan data saja :)

  1. No trackbacks yet.