Home > Lainnya > DropdownList Saling Terkait ( Dependent Dropdownlist )

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



    
        
        
    
    
        

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

ada dua yaitu ddlProp.php

'. $row['Nama'] ." ";
 }


dan ddlKota.php

'. $row['Kota'] ." ";
 }

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 Reply

Your email address will not be published. Required fields are marked *