Mysql
 sql >> Base de données >  >> RDS >> Mysql

Modifier la valeur de la deuxième sélection lors de la première sélection

Comme vous avez dit que vous n'aviez pas d'expérience avec jQuery ou Ajax, je posterai ma réponse avec autant de commentaires que possible. Je suppose que vous avez deux listes déroulantes de sélection dans votre page.

Le premier contient les constructeurs, il aura donc id="builders" .

Le second contient les régions, il aura donc id="regions" .

D'après ce que j'ai compris, la première sélection sera exactement celle que vous avez postée dans votre question, générée côté serveur (par PHP). Je vous demande seulement d'y apporter une légère modification, en faisant en sorte que chaque valeur d'option soit égale à l'ID de la base de données du constructeur, et non à son nom (à moins que la clé primaire du constructeur ne soit son nom et non un ID). Cela ne fera aucune différence pour l'utilisateur final mais sera important pour notre solution jQuery. Le second sera vide, car l'idée est de le remplir dynamiquement avec les régions liées au constructeur sélectionné dans le premier menu déroulant.

Passons maintenant au code jQuery :

//Everything that goes below this first line will be ready as soon as the page is fully loaded
$(document).ready(function() {
  //The following code defines an event. More precisely, we are defining that the code inside it will run every time our select with id "builders" has its value changed
  $('#builders').change(function() {
    //$(this) is our builders select. $(this).val() contains the selected value, which is the ID of our selected builder
    var currentValue = $(this).val();
    //Now, this is our Ajax command that will invoke a script called get_regions.php, which will receive the builder's ID in $_GET['builder_id'] and you can use to query your database looking for all regions related to this builder. Make sure to create an array with the returned regions. Your get_regions.php's last line should be echo json_encode($regions); 
    $.get("get_regions.php", {'builder_id': currentValue}, function(data) {
      //Inside this function is the code that will run when we receive the response from our PHP script. It contains a JSON encoded list of regions, so first of all we need to parse this JSON
      var regions = $.parseJSON(data);
      //Before filling our second select dropdown with the regions, let's remove all options it already contains, if any
      $('#regions').empty();
      //Now, all there is left is to loop over the regions, adding each as an option of the regions dropdown. I'll do it the universal way
      for (var i = 0; i < regions.length; i++) {
        var regionOption = '<option value="'+regions[i]['region_name']+'">';
        regionOption += regions[i]['region_name'];
        regionOption += '</option>';
        $('#regions').append(regionOption);
      }
    });
  });
});

Malgré toutes les erreurs de syntaxe (impossible de tester le code à partir d'ici), cela devrait faire l'affaire. J'espère que les commentaires étaient suffisamment clairs pour que vous compreniez comment les choses fonctionnent dans jQuery.