Bagaimana untuk Mencipta Kotak Jatuh Turun Lata Dinamik menggunakan jQuery dan AJAX?

Kotak Jatuh Turun Lata Dinamik

Contoh ini menunjukkan penciptaan kotak lungsur turun dinamik yang mengisi kotak lungsur turun kedua berdasarkan pemilihan kotak lungsur pertama, sebagai diperlukan.

Penjelasan:

1. Kotak Jatuh Pertama:

   • Mengandungi pilihan untuk dipilih oleh pengguna.
   • Apabila pengguna memilih item, ia mencetuskan acara tukar.

2. jQuery/AJAX:

   • Acara perubahan mencetuskan permintaan AJAX ke fail PHP yang berasingan ( cth., kemas kini.php).
   • Nilai yang dipilih daripada kotak lungsur pertama dihantar bersama dengan permintaan.

3. kemas kini.php:

   • Menerima nilai yang dipilih daripada kotak lungsur pertama.
   • Melaksanakan pertanyaan untuk mendapatkan semula pilihan yang berkaitan untuk menu lungsur kedua kotak.
   • Memformat data dalam format JSON dan mengembalikannya kepada panggilan AJAX.

4. Fungsi Kejayaan AJAX:

   • Menerima respons JSON dan mengisi kotak lungsur kedua dengan yang berkaitan pilihan.

Contoh Kod:

penguji.php:

<select name="gender"></select>

kemas kini.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

Mekanisme:

1. Apabila pengguna memilih pilihan daripada kotak lungsur pertama, nilainya ditangkap.
2. Permintaan AJAX dibuat untuk kemas kini.php, membawa nilai yang dipilih.
3. kemas kini.php mendapatkan semula pilihan yang sesuai untuk penurunan kedua -down box dan mengembalikannya dalam format JSON.
4. Fungsi kejayaan AJAX mengemas kini pilihan yang dipilih dalam kotak lungsur kedua, menjadikannya dinamik.

Dengan mengikuti langkah-langkah ini, anda boleh mencipta kotak lungsur turun yang membekalkan antara muka yang mesra pengguna dan responsif untuk pemilihan data.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kotak Jatuh Turun Lata Dinamik menggunakan jQuery dan AJAX?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!