DropdownList Saling Terkait ( Dependent Dropdownlist )

Dependent Dropdownlist atau dropdownlist yang saling terkait, merupakan salah satu hal yang sering digunakan ketika kita pengen mengisi form. kalau dulu kan maennya ngisi dulu terus next baru ngisi dropdown yang kedua, nah karena adanya jquery maka caranya pun ganti menjadi lebih elegan, yaitu ketika memilih satu dropdown maka yang lain otomatis akan mempopulate sendiri.

Nah, masalah kedua adalah bagaimana caranya kalau setelah di simpan lalu dicari ? apakah bisa langsung mengisi ?, ya tentu bisa, tekniknya adalah dengan menggunakan selected, jadi ya disamakan aja value dan hasil pencariannya.

(Banyak teori makin bingung mesti haha . .  . aku juga bingung nulis apa jane -_- ) ok langsung tutorial aja yakz, ceritanya kita punya satu database dengan tiga tabel yaitu table siswa, propinsi dan kota.  Kita ingin siswa dapat mengisi daerah asalnya dengan cara mengisi nim dan memilih propinsi lalu kota. Oh ya sebelume mohon maaf, soalnya scriptnya berantakan banyak redundan dan katanya gak aman blas, jadi kudu di optimalin lagi 😀 ( ben do sinau )

Langkah pertama adalah buat databasenya terlebih dahulu (biar cepet tak kasih kodenya :p )

CREATE TABLE IF NOT EXISTS `kota` (
  `Id` INT(11) NOT NULL AUTO_INCREMENT,
  `Kota` VARCHAR(50) NOT NULL,
  `IdProp` INT(11) NOT NULL,
  PRIMARY KEY (`Id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `propinsi`
--
 
CREATE TABLE IF NOT EXISTS `propinsi` (
  `kodeProp` INT(11) NOT NULL AUTO_INCREMENT,
  `Nama` VARCHAR(20) NOT NULL,
  PRIMARY KEY (`kodeProp`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
 
-- --------------------------------------------------------
 
--
-- Struktur dari tabel `siswa`
--
 
CREATE TABLE IF NOT EXISTS `siswa` (
  `nip` VARCHAR(50) NOT NULL,
  `prop` INT(11) NOT NULL,
  `kota` INT(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Langkah kedua adalah membuat formnya

<?php
 
mysql_connect('localhost', 'root', '');
mysql_select_db('indi');
$provinsi = mysql_query("SELECT * FROM propinsi") or die("Query failed: " . mysql_error());
if (isset($_POST["btnSubmit"])) {
    $txtNIP = $_POST["txtNIP"];
    $ddlProvinsi = $_POST["ddlProvinsi"];
    $ddlKota = $_POST["ddlKota"];
    mysql_query("insert into siswa values ('$txtNIP' , '$ddlProvinsi', '$ddlKota')") or die("Query failed: " . mysql_error());
}
?>
<html>
    <head>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <form method="post" action="">
            <input type="text" name="txtNIP" id="txtNIP" />
            <input type="button" value="Cari Data" id="btnCari" />
            <br/>
            <select name = "ddlProvinsi" id="ddlProvinsi">
                <?php
                while ($row = mysql_fetch_array($provinsi)) {
                    ?>
                    <option value = "<?= $row['kodeProp'] ?>" ><?= $row['Nama'] ?> </option>
                    <?php
                }
                ?>
            </select>
            <select name = "ddlKota" id = "ddlKota" >
            </select>
            <input type="submit" value="kirim" name="btnSubmit"/>
        </form>
    </body>
</html>

Langkah ketiga adalah membuat halaman buat nanti di populate dan ditempelkan ke dropdown dependentnya ( susah dijelaskan dengan tulisan -_- )

ada dua yaitu ddlProp.php

<?php
 
 
mysql_connect('localhost', 'root', '');
mysql_select_db('indi');
$nip = $_GET['nip'];
$siswa = mysql_query("SELECT * FROM siswa where nip = '$nip' ") or die("Query failed: " . mysql_error());
 while ($rows = mysql_fetch_array($siswa)) {
     $idProp = $rows['prop'];
 }
$Kota = mysql_query("SELECT * FROM propinsi ") or die("Query failed: " . mysql_error());
 while ($row = mysql_fetch_array($Kota)) {
     echo '<option value = "'. $row['kodeProp'] .'"';
     if ($row['kodeProp'] == $idProp)
     {
         echo 'selected';
     }
     echo '>'. $row['Nama'] ." </option>";
 }

dan ddlKota.php

<?php
 
 
mysql_connect('localhost', 'root', '');
mysql_select_db('indi');
if(isset($_GET['Prop'])){
 
$prop = $_GET['Prop'];
$Kota = mysql_query("SELECT * FROM kota where IdProp = '$prop' ") or die("Query failed: " . mysql_error());
}
if(isset($_GET['nip'])){
 
$nip = $_GET['nip'];
$siswa = mysql_query("SELECT * FROM siswa where nip = '$nip' ") or die("Query failed: " . mysql_error());
 while ($rows = mysql_fetch_array($siswa)) {
     $idProp = $rows['prop'];
     $idKota = $rows['kota'];
 }
 $Kota = mysql_query("SELECT * FROM kota where IdProp = '$idProp' ") or die("Query failed: " . mysql_error());
}
 
 while ($row = mysql_fetch_array($Kota)) {
 
     echo '<option value = "'. $row['Id'] .'"';
     if($idKota == $row['Id'] )
     {
         echo 'selected';
     }
     echo ' >'. $row['Kota'] ." </option>";
 }

terus langkah terakhir bikin deh scriptnya

$(document).ready(function() {
    $("#ddlProvinsi").change(function() {
        $.get('ddlKota.php?Prop=' + $(this).val(), function(data) {
            $("#ddlKota").html(data);
        });
    });
    $("#btnCari").click(function() {
        $.get('ddlProp.php?nip=' + $("#txtNIP").val(), function(data) {
            $("#ddlProvinsi").html(data);
        });
        $.get('ddlKota.php?nip=' + $("#txtNIP").val(), function(data) {
            $("#ddlKota").html(data);
        });
    });
});

selesai

 

Leave a Comment