Rumah >pembangunan bahagian belakang >tutorial php >Bagaimana untuk Mengisi Kotak Dropdown Bergantung Menggunakan AJAX dan PHP?

Bagaimana untuk Mengisi Kotak Dropdown Bergantung Menggunakan AJAX dan PHP?

Mary-Kate Olsenasal: 2024-12-12 14:46:15374semak imbas

How to Populate a Dependent Dropdown Box Using AJAX and PHP?

Bagaimanakah saya boleh mengisi kotak lungsur turun dinamik berdasarkan pemilihan kotak lungsur turun yang lain?

Saya mempunyai jadual pangkalan data yang dipanggil kategori seperti yang ditunjukkan di bawah:

[Imej jadual pangkalan data bernama "kategori" dengan lajur "id", "nama" dan "master"]

Saya sedang mencuba untuk melakukan kotak drop down dinamik dan skrip indeks ditunjukkan sebagai:

[Sampel kod skrip indeks]

Kemas kini.php ditunjukkan sebagai:

[ Contoh kod kemas kini.php]

Kotak lungsur ke-2 tidak menunjukkan nilai bergantung pada kotak lungsur pertama sebagai ditunjukkan:

[Imej borang dengan dua kotak lungsur turun. Kotak lungsur pertama mempunyai pilihan untuk "Pilih satu", "Kategori 1" dan "Kategori 2". Kotak lungsur kedua hanya mempunyai pilihan "----".]

Boleh seseorang tolong saya.

Jawapan:

Kepada buat kotak drop down dinamik di mana pilihan dalam kotak kedua bergantung pada pilihan dalam kotak pertama, anda boleh menggunakan yang berikut pendekatan:

Kendalikan peristiwa perubahan kotak lungsur turun pertama: Menggunakan jQuery, tambahkan pendengar acara perubahan pada kotak lungsur turun pertama. Apabila nilai kotak lungsur turun pertama berubah, peristiwa ini akan dicetuskan.
Hantar permintaan AJAX: Dalam pengendali acara, buat permintaan AJAX ke fail PHP (cth., update.php) yang akan mengembalikan pilihan untuk kotak drop down kedua berdasarkan nilai pilihan kotak drop down pertama.
Kendalikan respons AJAX: Dalam panggilan balik kejayaan permintaan AJAX, huraikan data respons, yang akan mengandungi kod HTML untuk pilihan yang akan ditambahkan pada kotak lungsur turun kedua.
Kemas kini kotak lungsur kedua: Gunakan JavaScript untuk mengemas kini HTML kotak lungsur kedua dengan pilihan yang dihasilkan daripada respons data.
Dayakan kotak drop down kedua: Setelah pilihan dikemas kini, dayakan kotak drop down kedua untuk pemilihan pengguna.

Berikut ialah contoh yang menunjukkan ini pendekatan:

penguji.php:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#first_dropdown').change(function() {
                var value = $(this).val();
                $.ajax({
                    url: 'update.php',
                    method: 'POST',
                    data: { value: value },
                    success: function(response) {
                        $('#second_dropdown').html(response);
                        $('#second_dropdown').prop('disabled', false);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <select>

kemas kini.php:

<?php
if (isset($_POST['value'])) {
    $selectedValue = $_POST['value'];
    $data = array();

    // Here you would typically query your database to retrieve options based on the selected value.
    if ($selectedValue == 'category1') {
        $data[] = '<option value="option1">Option 1</option>';
        $data[] = '<option value="option2">Option 2</option>';
    } elseif ($selectedValue == 'category2') {
        $data[] = '<option value="option3">Option 3</option>';
        $data[] = '<option value="option4">Option 4</option>';
    }

    echo implode('', $data);
}
?>

Dengan mengikuti pendekatan ini , anda boleh membuat kotak drop down dinamik berbilang peringkat di mana pilihan dalam setiap kotak drop down bergantung pada pilihan yang dibuat dalam drop down sebelumnya kotak.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Kotak Dropdown Bergantung Menggunakan AJAX dan PHP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php JavaScript jquery ajax html for select using Event this table database

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

Artikel sebelumnya：Symfony Station Communiqué — Disember Lihatlah Symfony, Drupal, PHP dan berita pengaturcaraan lain!Artikel seterusnya：Symfony Station Communiqué — Disember Lihatlah Symfony, Drupal, PHP dan berita pengaturcaraan lain!

Artikel berkaitan

Lihat lagi