Contoh kasus seperti ini, halaman web mempunyai dropdown (select option) yang jika dipilih akan menampilkan data sesuai dengan pilihan pada dropdown. seperti gambar berikut, jika dipilih merk maka akan menampilkan data sesuai dengan merk yang dimaksud tanpa me-refresh ulang seluruh halaman web.

langkah-langkahnya siapkan Model Merk dan Motor berikut dengan database migrationnya. persiapan awal tampilkan data merk dan motor dari controller ke view.


keterangan function index pada Controller diatas yaitu $motors akan mengambil semua data motor yang nantinya akan ditampilkan dalam tabel dan $merks akan menampilkan semua data merk yang nantinya akan ditampilkan dalam dropdown (select option).

untuk menampilkan dropdown pada view, bisa menggunakan Form. tambahkan id yang nantinya akan digunakan dalam proses ajax.


sedangkan data motor ditampilkan pada tabel. tambahkan id pada bagian tabel, dalam hal ini ditambahkan id="motors" pada body tabel untuk digunakan nantinya dalam proses ajax.


jangan lupa tambahkan JQuery untuk Ajax.


setelah menampilkan data selesai sekarang lanjut ke proses ajax yaitu menampilkan data sesuai dengan pilihan dropdown (select option). siapkan routes untuk proses load data berdasarkan merk.


function merkAjax pada controller seperti berikut.


bagian terakhir yaitu menyiapkan script untuk proses pergantian pada dropdown. pastikan id dari dropdown maupun tabel benar. dalam hal ini #merks dan #motors. data didapatkan dari route merk/id (lihat bagian $.get()). untuk proses debugging tampikan pada console (firefox ctrl+shift+k). kemudian data ditampilkan pada #motors dengan perulangan sesuai dengan tabel baris dan kolomnya.


download projectnya disini.