Dynamic Select aka Isian dgn Hierarki Pilihan pada ScriptCase (Database Processing Oriented Software)

Sumber ChatGPT

Scriptcase sangat bisa melakukan hal seperti judul, yaitu membuat field kedua (dropdown) bergantung pada pilihan field pertama. Ini disebut 

"Dependent Dropdown" 

atau 
"Dynamic Select / Cascading Dropdown" 
di Scriptcase.

Scriptcase adalah sebuah platform pengembangan aplikasi web berbasis PHP yang memungkinkan Anda untuk dengan cepat membuat aplikasi seperti sistem manajemen database, laporan, dashboard, dan sistem informasi lainnya, tanpa harus menulis banyak kode secara manual.

🧩 CONTOH KASUS


Field 1: kategori_produk (opsi: Elektronik, Pakaian)

Field 2: sub_kategori

Jika pilih Elektronik → muncul: TV, Laptop, HP

Jika pilih Pakaian → muncul: Baju, Celana, Jaket


🛠️ Cara Melakukannya di Scriptcase:
✅ 1. Siapkan Dua Field (Dropdown / Select)
Misalnya:
Field 1: {kategori}
Field 2: {sub_kategori}

✅ 2. Gunakan "Lookup" Dinamis untuk Field Kedua
Langkah:
1. Masuk ke field {sub_kategori}
2. Klik tab Lookup Settings
3. Pilih Type: Automatic Lookup
4. Masukkan SQL seperti ini:
SELECT nama_subkategori, id_subkategori 
FROM subkategori 
WHERE id_kategori = '{kategori}'
ORDER BY nama_subkategori
Penjelasan:
{kategori} adalah nilai dari field utama.
Lookup akan dijalankan ulang saat {kategori} berubah.

✅ 3. Aktifkan AJAX untuk Field 1
Agar perubahan pada {kategori} langsung memicu update pada {sub_kategori}, lakukan ini:
1. Buka menu AJAX Events
2. Pilih field kategori
3. Buat event: onChange
4. Di dalam event itu, tambahkan kode berikut:
sc_ajax_refresh_fields("sub_kategori");
Penjelasan:
Ini akan me-refresh isi dari field sub_kategori sesuai pilihan terbaru dari kategori.

✅ 4. (Opsional) Tambahkan Validasi atau Reset Field
Kalau kamu mau reset nilai field sub_kategori setiap kali kategori berubah, bisa tambahkan:
{sub_kategori} = '';


🔄 Tampilan Interaktif (Hasil Akhir):

Ketika user pilih kategori:

Elektronik → dropdown kedua langsung berubah ke TV, Laptop, HP

Pakaian → dropdown kedua langsung berubah ke Baju, Celana, Jaket

Tidak perlu reload halaman

No comments: