--> Skip to main content
Home Bootstrap Jquery Pemrograman Web php Contoh Jquery Ajax Dropdown List pada PHP

Contoh Jquery Ajax Dropdown List pada PHP

Untuk pembuatan website yang mengandung dropdown list kita dapat menggunakan salah satunya dengan class form control yang diterapkan pada tag select pada Bootstrap.

Namun bagaimana caranya bila nilai dari dropdpown list tersebut bergantung pada dropdown diatasnya ?. Untuk menjawabnya kita dapat menggunakan JQuery Ajax.

Studi Kasus

Perhatikan Gambar.1  dibawah ini yang menunjukkan pemilihan provinsi :
Gambar.1
Dari Gambar.1 kita melihat :
  • Jika dipilih Provinsi Nanggroe Aceh Darussalam, maka dropdown list hanya menampilkan kabupaten-kabupaten yang ada pada provinsi tersebut.
  • Jika dipilih Provinsi Sumatera Utara, maka dropdown list hanya menampilkan kabupaten-kabupaten yang ada pada provinsi tersebut.
Sekarang perhatikan Gambar.2  dibawah ini yang menunjukkan pemilihan kabupaten :
Gambar.2

 Dari Gambar.2 kita melihat :
  • Jika dipilih Provinsi Nanggroe Aceh Darussalam dan dipilih Kabupaten Aceh Barat, maka hanya akan menampilkan nama-mana kecamatan yang hanya terdapat pada Kabupaten tersebut.  Begitu halnya jika kita memilih Provinsi Nanggroe Aceh Darussalam dan Kabupaten Aceh Besar, maka hanya ditampilkan kecamatan yang terdapat pada kabupaten Aceh besar saja.
  • Jika dipilih Provinsi Sumatera Utara dan dipilih Kabupaten Batubara maka hanya akan menampilkan nama-nama kecamatan yang hanya terdapat pada Kabupaten tersebut. Begitu halnya jika kita memilih Provinsi Sumatera Utara dan Kabupaten Asahan, maka hanya ditampilkan kecamatan yang terdapat pada Kabupaten Asahan aja.
Dari studi kasus tersebut kita akan membuat dropdown list dengan jquery ajax dengan datanya diambil dari database.

1. Membuat Database

Buatlah sebuah database yang bernama dbprovinsi, kemudian buat tiga tabel dan datanya seperti script sql berikut :
CREATE TABLE IF NOT EXISTS `provinsi` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `nama_provinsi` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `provinsi` (`id`, `nama_provinsi`) VALUES
(1, 'Nanggroe Aceh Darussalam'),
(2, 'Sumatera Utara');

CREATE TABLE IF NOT EXISTS `kabupaten` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `id_provinsi` int(5) NOT NULL,
  `nama_kabupaten` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

INSERT INTO `kabupaten` (`id`, `id_provinsi`, `nama_kabupaten`) VALUES
(1, 1, 'Aceh Utara'),
(2, 1, 'Aceh Timur'),
(3, 1, 'Aceh Barat'),
(4, 1, 'Aceh Besar'),
(5, 2, 'Asahan'),
(6, 2, 'Batubara'),
(7, 2, 'Deli Serdang'),
(8, 2, 'Tapanuli Selatan');

CREATE TABLE IF NOT EXISTS `kecamatan` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `id_kabupaten` int(5) NOT NULL,
  `nama_kecamatan` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;

INSERT INTO `kecamatan` (`id`, `id_kabupaten`, `nama_kecamatan`) VALUES
(1, 1, 'Kecamatan Baktiya'),
(2, 1, 'Kecamatan Banda Baro'),
(3, 2, 'Kecamatan Banda Alam'),
(4, 2, 'Kecamatan Birem Bayeun'),
(5, 3, 'Kecamatan Arongan Lambalek'),
(6, 3, 'Kecamatan Bubon'),
(7, 4, 'Kecamatan Baitussalam'),
(8, 4, 'Kecamatan Darul Imarah'),
(9, 5, 'Kecamatan Aek Kuasan'),
(10, 5, 'Kecamatan Aek Ledong'),
(11, 6, 'Kecamatan Air Putih'),
(12, 6, 'Kecamatan Limapuluh'),
(13, 7, 'Kecamatan Bangun Purba'),
(14, 7, 'Kecamatan Batang Kuis'),
(15, 8, 'Kecamatan Angkola Barat'),
(16, 8, 'Kecamatan Arse');

2. Membuat file connection.php

File connection.php bertujuan untuk membangun konektivitas dengan database yang akan dipanggil:
<?php
$con=mysqli_connect("localhost","root","","dbprovinsi");
if (mysqli_connect_errno())
{
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

3. Membuat file loadData.php

File ini akan menampilkan data yang sesuai, file ini dipanggil oleh ajax pada file utama (index.php). Dalam file ini akan diload data kabupaten yang sesuai dengan provinsi yang dipilih pada file index.php serta akan mengload data kecamatan yang sesuai dengan kabupaten yang dipilih pada file index.php :

<?php
include 'connection.php';

$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="kabupaten"){
    $sql="select id,nama_kabupaten from kabupaten where id_provinsi='".$loadId."' order by nama_kabupaten asc";
}
else{
    $sql="select id,nama_kecamatan from kecamatan where id_kabupaten='".$loadId."' order by nama_kecamatan asc";
}
$res=mysqli_query($con,$sql);
$check=mysqli_num_rows($res);
if($check > 0){
    $HTML="";
    while($row=mysqli_fetch_array($res)){
        $HTML.="<option value='".$row['id']."'>".$row['1']."</option>";
    }
    echo $HTML;
}
?>

4. Membuat file index.php

Dalam file ini kita menggunakan Bootstrap sebagai front-end. Disamping itu dalam file ini setiap provinsi yang dipilih, kemudian file loadData.php yang sesuai untuk kabupaten dan kecamatan akan dipanggil oleh jquery ajax yang terdapat pada file index.php :

<?php
include "connection.php";
$sqlprovinsi="select id,nama_provinsi from provinsi  order by nama_provinsi asc ";
$resprovinsi   = mysqli_query($con,$sqlprovinsi);
$checkprovinsi = mysqli_num_rows($resprovinsi);
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="ilmu-detil.blogspot.com">
	<title>Detect Province/State using PHP Ajax </title>
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/ilmudetil.css">
	<link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
	<script src='assets/js/jquery-1.10.1.min.js'></script>       
	<script src="assets/js/bootstrap.min.js"></script>
	
	<script type="text/javascript">
		function pilihprovinsi(id_provinsi){
			if(id_provinsi!="-1"){
				loadData('kabupaten',id_provinsi);
				$("#kecamatan_dropdown").html("<option value='-1'>Pilih Kecamatan</option>");	
			}else{
				$("#kabupaten_dropdown").html("<option value='-1'>Pilih Kabupaten</option>");
				$("#kecamatan_dropdown").html("<option value='-1'>Pilih Kecamatan</option>");		
			}
		}

		function pilihkabupaten(id_kabupaten){
			if(id_kabupaten!="-1"){
				loadData('kecamatan',id_kabupaten);
			}else{
				$("#kecamatan_dropdown").html("<option value='-1'>Pilih Kecamatan</option>");		
			}
		}

		function loadData(loadType,loadId){
			var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
			$("#"+loadType+"_loader").show();
			$("#"+loadType+"_loader").fadeIn(400).html('Please wait... <img src="image/loading.gif" />');
			$.ajax({
				type: "POST",
				url: "loadData.php",
				data: dataString,
				cache: false,
				success: function(result){
					$("#"+loadType+"_loader").hide();
					$("#"+loadType+"_dropdown").html("<option value='-1'>Pilih "+loadType+"</option>");  
					$("#"+loadType+"_dropdown").append(result);  
				}
			});
		}
	</script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">
			Pusat Ilmu Secara Detil</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-left">
				<li class="clr1 active"><a href="index.html">Home</a></li>
				<li class="clr2"><a href="">Programming</a></li>
				<li class="clr3"><a href="">English</a></li>
			</ul>
		</div>
	</div>
</div>
</br></br></br></br>
<div class ="container">
	<div class="row">
			<div class="col-md-12">
			<h4 >Detecting Province </h4>
			</div>
	</div>
</div>
<div class="container">
	<div class="row">
		<div class="col-md-3">
			<?php
			if($checkprovinsi > 0){
				?>
				<form role="form">
					<div class="form-group">
						
							<select class="form-control" onchange="pilihprovinsi(this.options[this.selectedIndex].value)">
								<option value="-1">Pilih Provinsi</option>
								<?php
								while($rowprovinsi=mysqli_fetch_array($resprovinsi)){
									?>
									<option value="<?php echo $rowprovinsi['id']?>"><?php echo $rowprovinsi['nama_provinsi']?></option>
									<?php
								}
								?>
							</select>
						
					</div>
					<div class="form-group">
						
							<select class="form-control" id="kabupaten_dropdown" onchange="pilihkabupaten(this.options[this.selectedIndex].value)">
								<option value="-1">Pilih Kabupaten</option>
							</select>
							<span id="state_loader"></span>
						
					</div>
					
					<div class="form-group">
						
							<select class="form-control" id="kecamatan_dropdown">
								<option value="-1">Pilih Kecamatan</option>
							</select>
							<span id="city_loader"></span>
						
					</div>
				</form>
				<?php
			}else{
				echo 'Data Provinsi tidak ditemukan';
			}
			?>
		</div>
	</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
   <div class="container">
      <p class="navbar-text pull-left">Detailed Technology Center, Powered by <a href="http://ilmu-detil.blogspot.co.id/">Pusat Ilmu Secara Detil</a></p>
   </div>
</div>  
</body>
</html>

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar