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

jquery pour remplir plusieurs listes déroulantes à partir de la base de données

Votre chemin est correct, mais il faudra de nombreux appels ajax pour apporter des valeurs d'option pour tous les champs sélectionnés. Vous pouvez accomplir cela en un seul appel ajax en utilisant JSON. Sur la page PHP, vous pouvez créer un tableau qui contiendra les chaînes HTML représentant les options des quatre cases de sélection. Ensuite, vous pouvez convertir ce tableau en une chaîne JSON à l'aide de la fonction json_encode() :

$arr=array("second"=>"<option>....</option>.......<option...</option>", //for second dropdown
           "third"=>"<option>....</option>.......<option...</option>", //for third dropdown
           "fourth"=>"<option>....</option>.......<option...</option>", //for fourth dropdown
           "fifth"=>"<option>....</option>.......<option...</option>" //for fifth dropdown
  );
 echo json_encode($arr);

Ensuite, sur la page Web, pour la première liste déroulante, vous pouvez écrire une fonction jQuery comme celle-ci :

 function loadOptions(){
jQuery.ajax({

  success: function(data){
     jQuery("select#field_2").html(data["second"]);
     jQuery("select#field_3").html(data["third"]);
     jQuery("select#field_4").html(data["fourth"]);
     jQuery("select#field_5").html(data["fifth"]);
  }
});
}

De cette façon, vous pouvez charger les options de toutes les autres listes déroulantes en un seul appel ajax. Je comprends que vous avez également besoin d'une fonctionnalité similaire pour d'autres listes déroulantes. Vous pouvez également écrire une fonction similaire pour d'autres listes déroulantes. Voici une fonction généralisée, dans laquelle vous transmettez le numéro de liste déroulante et la fonction renverra les options pour les listes déroulantes ciblées. Par exemple, si vous passez la liste déroulante numéro 2, la fonction renverra des options pour les listes déroulantes 3, 4 et 5. Si vous passez 3, elle renverra des options pour les listes déroulantes 4 et 5, et ainsi de suite.

 function loadOptions(selectNo){
jQuery.ajax({
  data:{"selectNo",selectNo},
  success: function(data){
     switch(selectNo){
     case 1: jQuery("select#field_2").html(data["second"]);
     case 2: jQuery("select#field_3").html(data["third"]);
     case 3: jQuery("select#field_4").html(data["fourth"]);
     case 4: jQuery("select#field_5").html(data["fifth"]);
     }
  }
});
}

Sur la page PHP, vous pouvez écrire le code ci-dessous pour implémenter cette fonctionnalité :

$selectNo=$_GET["selectNo"];
$arr=array();
switch(selectNo){
case 1: $arr["second"]="<option>....</option>.......<option...</option>"; //for second dropdown
case 2: $arr["third"]="<option>....</option>.......<option...</option>"; //for third dropdown
case 3: $arr["fourth"]="<option>....</option>.......<option...</option>"; //for fourth dropdown
case 4: $arr["fifth"="<option>....</option>.......<option...</option>"; //for fifth dropdown
}
 echo json_encode($arr);

Plus d'informations sur JSON peuvent être trouvées ici .