Membuat Combobox Dinamis dengan jQuery & PHP

Combobox biasa digunakan pada form (formulir), misalnya dalam form tersebut membutuhkan data kategori dan subkategori. Agar data yang dimasukkan valid/sesuai, maka logikanya subkategori tampil saat salah satu kategori sudah dipilih, dan list subkategori yang tampil pun harus sesuai dengan kategori yang dipilih. Dalam postingan kali ini kita akan belajar bagaimana cara membuatnya dengan menggunakan jQuery. Let’s see🙂 Dalam project ini saya akan menampilkan provinsi berdasarkan negara yang sudah dipilih. Berikut langkah-langkahnya:

  1. Siapkan tabel-tabel berikut pada database dan isikan beberapa data dummy untuk melihat hasilnya nanti

    nama tabel: country

    Gbr1-Country table

    Gbr1- country table

  2. nama table: province (country_id diisi berdasarkan country_id dari tabel country)
    province table

    Gbr2 – province table

  3. Buat query untuk mengambil data negara-negara dengan mengetikan script ini, nama file saya index.php

    $query = mysql_query("SELECT * FROM country");
    
  4. Tampilkan list negara dengan mengetikkan script ini

    <div>Country
    	<select id="country">
    		<option value="0">- Select Country -</option>
    		<?php while($country = mysql_fetch_array($query)){ ?>
    			<option value="<?=$country['country_id']?>"><?=$country['name']?></option>
    		<?php } ?>
    	</select>
    </div>
    <div id="province_wrapper">Province
    	<select id="province"></select>
    </div>
    
  5. Nah sekarang kita buat script untuk mengambil data provinsi saat kategori sudah dipilih, menggunakan ajax jQuery, berikut scriptnya

    $(function(){
    	$("#province_wrapper").hide();
    	$("#country").change(function(){
    		if($(this).val() != 0){
    			$("#province_wrapper").show();
    			$.get("ajax.php?country_id="+$(this).val(),function(province){
    				var p_html = "";
    				for(var i=0;i<province.length;i++){
    					p_html += "<option value='"+province[i].province_id+"'>"+province[i].name+"</option>";
    				}
    				$("#province").html(p_html);
    			},"json");
    		}
    	});
    });
    

    Penjelasan:

    1. pada line 2: div id province_wrapper yang berisi dropdown provinsi terlebih dahulu di hide
    2. pada line 3: adalah selector event jquery yang menghandle setiap dropdown pada saat diganti-ganti
    3. pada line 5: menampilkan dropdown provinsi
    4. pada line 6: melakukan ajax untuk mengambil provinsi-provinsi dari country/negara yang sudah dipilih
    5. pada line 7-11: memasukkan provinsi-provinsi yang didapat dari hasil ajax ke dropdown id provinsi
  6. Dan berikut script untuk memberikan data provinsi di file ajax.php

    $country_id = $_GET['country_id'];
    $query 		= mysql_query("SELECT * FROM `province` WHERE country_id=".$country_id);
    $provinces	= array();
    while($data = mysql_fetch_array($query)){
    	$provinces[] = array('province_id'=>$data['province_id'],'name'=>$data['name']);
    }
    echo json_encode($provinces);
    

    Penjelasan:

    1. pada line 1: mengambil country_id dengan method $_GET
    2. pada line 2: melakukan query untuk mengambil provinsi-provinsi dengan country_id yang dikirim
    3. pada line 3: inisialisasi array provinsi
    4. pada line 4-6: membentuk array baru agar mudah untuk ditampilkan dengan jQuery, membentuk array dengan key province_id dan name
    5. pada line 5: mengirimkan data provinsi dalam bentuk json (json adalah bentuk kembalian yang sudah ditentukan saat kita melakukan perintah ajax – lihat line 12 pada tahap sebelumnya)

Nah udah selesai deh, ini preview tampilanya🙂

  • Tampilan saat halaman di load, hanya terdapat dropdown Country, dropdown Province di hide

    Gbr3 - Review tampilan pertama

    Gbr3 – Preview tampilan pertama

  • Saat memilih negara/country Indonesia, dropdown provinsi muncul dan menampilkan provinsi-provinsi di Indonesia

    Gbr4 - Review Tampilan memilih negara Indonesia

    Gbr4 – Preview Tampilan memilih negara Indonesia

  • Saat memilih negara/country South Korea (Korea Selatan), dropdown provinsi muncul dan menampilkan provinsi-provinsi di Korea Selatan

    Gbr5 - Review Tampilan memilih negara Korea Selatan

    Gbr5 – Preview Tampilan memilih negara Korea Selatan

Sekian postingan kali ini semoga bermanfaat ya🙂

13 thoughts on “Membuat Combobox Dinamis dengan jQuery & PHP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s