Bagaimana untuk Mengisi Kotak Dropdown Bergantung Menggunakan AJAX dan PHP?-tutorial php-php.cn

Bagaimana untuk Mengisi Kotak Dropdown Bergantung Menggunakan AJAX dan PHP?

Mary-Kate Olsen

Lepaskan： 2024-12-12 14:46:15

asal

392 orang telah melayarinya

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>

Salin selepas log masuk

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);
}
?>

Salin selepas log masuk

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!