Rumah >pangkalan data >tutorial mysql >Bagaimana untuk Mencipta Dropdown Bergantung Dinamik Menggunakan jQuery, AJAX, PHP dan MySQL?

Bagaimana untuk Mencipta Dropdown Bergantung Dinamik Menggunakan jQuery, AJAX, PHP dan MySQL?

Barbara Streisand
Barbara Streisandasal
2024-11-17 16:54:02279semak imbas

How to Create Dynamic Dependent Dropdowns Using jQuery, AJAX, PHP, and MySQL?

Titis Turun Dinamik dengan jQuery/AJAX dan PHP/MySQL

Masalah:

Membina set kotak dropdown dinamik menggunakan jQuery/AJAX dan PHP/MySQL di mana yang kedua pilihan lungsur turun bergantung pada pemilihan dalam lungsur pertama.

Pertanyaan JSON:

Pertanyaan JSON yang disediakan untuk menjana nilai lungsur kedua berfungsi dengan betul. Walau bagaimanapun, terdapat isu mengisi pilihan ke dalam elemen borang lungsur turun.

Javascript:

Ralat utama terletak dalam pengendali acara untuk lungsur pertama. Kod yang diubah suai hendaklah menyerupai:

$().ready(function () {
    $("#item_1").change(function () {
        var group_id = $(this).val();

        $.ajax({
            type: "POST",
            url: "../../db/groups.php?item_1_id=" + group_id,
            dataType: "json",
            success: function (data) {
                // Clear previous options
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Select Option</option>');

                // Populate options from JSON
                $.each(data.subjects, function (i, val) {
                    $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
                });

                $('select#item_2').focus();
            },
            beforeSend: function () {
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Loading...</option>');
            },
            error: function () {
                $('select#item_2').attr('disabled', true);
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">No Options</option>');
            }
        });
    });
});

HTML:

Kod HTML yang diberikan kelihatan betul.

PHP:

Kod PHP untuk mendapatkan semula data JSON juga betul.

Contoh Output JSON:

Sampel output JSON yang disediakan adalah sah dan akan dihuraikan dengan betul oleh kod jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Dropdown Bergantung Dinamik Menggunakan jQuery, AJAX, PHP dan MySQL?. 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