Yoesuv

Laravel dan Android Tutorial

Blogger news

Laravel Dropdown (Select Option) dengan Ajax

Yoesuv 09.45 9 komentar
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.

9 komentar :

  1. Deki kurnia19 Februari 2017 pukul 13.17

    mas ini kan untuk dua table berbeda, kalo satu tabel apa caranya sama ? jadi kalo pilih judul buku nanti keluar harganya ?

    BalasHapus
    Balasan
    1. Yoesuv25 Februari 2017 pukul 12.00

      sama kok, cuma ditentukan dulu value untuk select optionnya,

      Hapus
  2. Official Oto29 Agustus 2017 pukul 01.04

    mas cara ngeload data ke dropdown (select option)
    di select option itu daftar nim
    trus memilih salah satu nya dipilih dan menampilkan data mahasiswa di text box nya.
    itu gimana yah, mohon info yah gan, via email kalau boleh
    officialoto@gmail.com

    BalasHapus
  3. Unknown16 September 2018 pukul 11.15

    mas kok saya gk berhasil yo

    BalasHapus
  4. LOVELYZ TRILOGY14 November 2019 pukul 15.29

    makais min
    Alat pemisah lcd touchscreen

    BalasHapus
  5. The Cool Man6 Juli 2020 pukul 00.09

    Kalau update data yg ada dropdown nya belum ada...?

    BalasHapus
  6. Unknown27 Juni 2021 pukul 14.26

    Terimakasih artikelnya sangat membantu, mas boleh bertanya itu kan untuk ID sdh bisa ya relasinya nah kalau mau nampilin nama nya gimana menggantikan ID. jadi dalam kasus ini bukan ID merk yang tampil jadi nama merknya. terimakaish

    BalasHapus

Langganan: Posting Komentar ( Atom )