Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengisi Satu Senarai Drop-Down Berdasarkan Pilihan dalam Satu Lagi Menggunakan JavaScript?

Bagaimana untuk Mengisi Satu Senarai Drop-Down Berdasarkan Pilihan dalam Satu Lagi Menggunakan JavaScript?

DDD
DDDasal
2024-10-18 13:14:30127semak imbas

How to Populate One Drop-Down List Based on a Selection in Another Using JavaScript?

Mengisi Satu Dropdown Berdasarkan Pemilihan dalam Satu Lagi

Apabila bekerja dengan senarai dropdown, selalunya perlu menukar kandungan satu dropdown berdasarkan pada pemilihan yang lain. Dalam JavaScript, ini boleh dicapai tanpa memerlukan pertanyaan pangkalan data. Berikut ialah contoh cara untuk melakukannya:

Kod yang disediakan terbahagi kepada dua fungsi:

  1. configureDropDownLists(ddl1, ddl2): Fungsi ini mengambil masa dua argumen, iaitu dua senarai lungsur turun yang akan dipautkan. Ia menggunakan nilai lungsur turun pertama (ddl1) untuk menentukan pilihan yang hendak diisi dalam menu lungsur kedua (ddl2).
  2. createOption(ddl, teks, nilai): Fungsi pembantu ini mencipta elemen pilihan untuk senarai lungsur turun dan menambahkannya pada koleksi pilihan lungsur turun.

Dalam contoh kod HTML, kami mempunyai dua senarai lungsur turun: ddl1 dan ddl2. Apabila pengguna memilih pilihan dalam senarai lungsur turun ddl1, peristiwa onchange dicetuskan, yang memanggil fungsi configureDropDownLists().

Fungsi configureDropDownLists() mula-mula mengosongkan pilihan daripada ddl2 dan kemudian menambah pilihan baharu berdasarkan nilai yang dipilih dalam ddl1. Contohnya, jika pengguna memilih "Warna" dalam ddl1, fungsi mengisi ddl2 dengan pilihan untuk warna seperti "Hitam", "Putih" dan "Biru."

Dengan mengikut kod yang disediakan, anda boleh dengan mudah isikan satu lungsur turun berdasarkan pemilihan yang lain tanpa memerlukan pertanyaan pangkalan data yang kompleks.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Satu Senarai Drop-Down Berdasarkan Pilihan dalam Satu Lagi Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn