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

Mengisi Dropdown Kedua Berdasarkan Pemilihan Dropdown Pertama Menggunakan jQuery/AJAX dan PHP/MySQL

Membangunkan menu dropdown dinamik membolehkan pengguna berinteraksi dengan borang lebih mudah. Artikel ini menunjukkan cara mengisi lungsur kedua berdasarkan pemilihan yang dibuat dalam lungsur pertama menggunakan jQuery/AJAX dan PHP/MySQL.

Kod HTML mencipta dua senarai lungsur, dengan yang pertama diisi pada pemuatan halaman. Menu lungsur kedua harus memaparkan pilihan berdasarkan pemilihan yang dibuat dalam menu lungsur pertama.

Kod PHP menanyakan pangkalan data untuk menjana objek JSON yang mengandungi nilai untuk lungsur kedua. Objek JSON kemudiannya dihantar ke permintaan jQuery/AJAX.

$(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 options corresponding to earlier option of first dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');
        // Populate options of the second dropdown
        $.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>');
      }
    });

  });
});

Perhatikan bahawa hasil JSON hendaklah diformatkan seperti berikut:

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

Setelah objek JSON diterima dan dihuraikan dalam JavaScript, pilihan dilampirkan secara dinamik pada menu lungsur kedua. Ini menyediakan cara yang mesra pengguna untuk mengecilkan pilihan berdasarkan pilihan sebelumnya.

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