PHP Multiple Dropdown Dengan JQuery AJAX

Rumahit.ID - Dalam seri PHP kali ini akan mengulas multiple dropdown dengan jquery dan AJAX. Sekenarionya adalah kita akan menampilkan data provinsi menggunakan input type select. Setelah terpilih satu nama provinsi, maka akan ditampilkan daftar kota yang merupakan bagian dari provinsi tersebut melalui atribut select berikutnya.

Sedangkan untuk datanya kita ambil dari database MySQL yang sudah saya siapkan dibawah. Karena menggunakan JQuery, maka terlebih dahulu kita download jquery.min.js terserah mau versi berapa. Sekarang kita langsung saja untuk ngoding.

Step 1 : Membuat Database

Buat database dengan nama "tes" misalnya. Bisa melalui phpmyadmin dengan memasukkan syntax sql dibawah ini :

-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: 21 Des 2019 pada 01.02
-- Versi Server: 5.6.21
-- PHP Version: 5.6.3

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `tes`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `kota`
--

CREATE TABLE IF NOT EXISTS `kota` (
`id_kota` int(11) NOT NULL,
  `id_prov` int(11) NOT NULL,
  `nm_kota` varchar(25) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `kota`
--

INSERT INTO `kota` (`id_kota`, `id_prov`, `nm_kota`) VALUES
(1, 1, 'SURABAYA'),
(2, 1, 'SIDOARJO'),
(3, 1, 'MOJOKERTO'),
(4, 1, 'MALANG'),
(6, 3, 'SOLO'),
(7, 3, 'SEMARANG'),
(8, 3, 'PEKALONGAN'),
(9, 3, 'SURAKARTA'),
(11, 2, 'BANDUNG'),
(12, 2, 'BEKASI'),
(13, 2, 'BOGOR'),
(14, 2, 'CIREBON');

-- --------------------------------------------------------

--
-- Struktur dari tabel `provinsi`
--

CREATE TABLE IF NOT EXISTS `provinsi` (
`id_prov` int(11) NOT NULL,
  `nm_prov` varchar(25) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `provinsi`
--

INSERT INTO `provinsi` (`id_prov`, `nm_prov`) VALUES
(1, 'JAWA TIMUR'),
(2, 'JAWA BARAT'),
(3, 'JAWA TENGAH');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `kota`
--
ALTER TABLE `kota`
 ADD PRIMARY KEY (`id_kota`);

--
-- Indexes for table `provinsi`
--
ALTER TABLE `provinsi`
 ADD PRIMARY KEY (`id_prov`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `kota`
--
ALTER TABLE `kota`
MODIFY `id_kota` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=15;
--
-- AUTO_INCREMENT for table `provinsi`
--
ALTER TABLE `provinsi`
MODIFY `id_prov` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=4;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Step 2 : Buat Folder di htdocs

Buatlah folder latihan anda di htdocs , misal kita buat folder "coba" . Folder ini yang nanti kita akses sebagai http://localhost/coba
dalam folder coba kita buat tiga file :
1. index.php
2. cari_kota.php
3. jquery.min.js (silahkan download di website JQuery)

Step 3 : Buat file index.php

isikan dengan kode berikut :

<?php

    #koneksi ke database
    $con = mysqli_connect("localhost","root","","tes");
?>

<script type="text/javascript" src="jquery.min.js"></script>
Provinsi : <select name="provinsi" id="provinsi">
    <option value="">- Pilih Tempat -</option>
   
    <!-- looping data provinsi -->
    <?php
    $query= mysqli_query ($con, "SELECT * FROM provinsi");
    while($row=mysqli_fetch_array($query)){
   
    ?>
        <option value="<?php echo $row["id_prov"] ?>"><?php echo $row["nm_prov"] ?></option>
   
    <?php
    }
    ?>
</select>

    &nbsp;&nbsp;&nbsp;<img src="loader.gif" width="10px" height="10px" id="imgLoad" style="display:none">
    <br>
    <br>
Kota : <select name="kota" id="kota">
    <!-- hasil data dari cari_kota.php akan ditampilkan disini -->
</select>

<script>
   
    $("#provinsi").change(function(){
   
        // variabel dari nilai combo box provinsi
        var id_provinsi = $("#provinsi").val();
       
        // tampilkan image load
        $("#imgLoad").show("");
       
        // mengirim dan mengambil data
        $.ajax({
            type: "POST",
            dataType: "html",
            url: "cari_kota.php",
            data: "prov="+id_provinsi,
            success: function(msg){
               
                // jika tidak ada data
                if(msg == ''){
                    alert('Tidak ada data Kota');
                }
               
                // jika dapat mengambil data,, tampilkan di combo box kota
                else{
                    $("#kota").html(msg);                                                     
                }
               
                // hilangkan image load
                $("#imgLoad").hide();
            }
        });    
    });
</script>

Step 4 : Buat file cari_kota.php

Isi dengan kode dibawah ini :

<?php
/// edit sesuai dengan settingan database
$con = mysqli_connect("localhost","root","","tes");
   
    $query= mysqli_query($con, "SELECT * FROM kota WHERE id_prov='".$_POST["prov"]."'");
    while($row=mysqli_fetch_array($query)){
   
    ?>
        <option value="<?php echo $row["id_kota"] ?>"><?php echo $row["nm_kota"] ?></option><br>
   
    <?php
    }
    ?>

Step 5 : Jalankan

Terakhir tinggal jalankan di browser : localhost/coba