Comment remplir une liste déroulante dépendante à l'aide de jQuery, AJAX, PHP et MySQL ?

Remplir la deuxième liste déroulante en fonction de la première sélection déroulante à l'aide de jQuery/AJAX et PHP/MySQL

Le développement de menus déroulants dynamiques permet aux utilisateurs d'interagir avec les formulaires plus facilement. Cet article montre comment remplir la deuxième liste déroulante en fonction de la sélection effectuée dans la première liste déroulante à l'aide de jQuery/AJAX et PHP/MySQL.

Le code HTML crée deux listes déroulantes, la première étant remplie au chargement de la page. La deuxième liste déroulante doit afficher les options basées sur la sélection effectuée dans la première liste déroulante.

Le code PHP interroge la base de données pour générer un objet JSON contenant les valeurs de la deuxième liste déroulante. L'objet JSON est ensuite transmis à la requête 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>');
      }
    });

  });
});

Notez que le résultat JSON doit être formaté comme suit :

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

Une fois l'objet JSON reçu et analysé en JavaScript, les options sont ajoutées dynamiquement à la deuxième liste déroulante. Cela fournit un moyen convivial d'affiner les options en fonction des sélections précédentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!