Liaison entre deux liste déroulante pays et ville en jQuery, Ajax et PHP

L’ajout des listes dépendant sera une fonctionnalité très utile lorsqu’il existe une dépendance entre les options. Par exemple, si nous devons lister les publications en fonction de leur catégorie, nous pouvons avoir des listes déroulantes de catégories de publications dépendantes.
 
 
Dans ce tutoriel, nous allons créer des listes dépendant du pays. Lors de la modification des valeurs de la liste déroulante des pays, les options de la liste déroulante des villes sont chargées de manière dynamique. Nous allons utilisé AJAX jQuery pour obtenir les options dépendantes du menu déroulant des villes en fonction du pays sélectionné.
 

Code HTML :

<div>
	<div>
		<label>Pays:</label><br/>
		<select name="pays" id="liste-pays" onChange="getVille(this.value);">
		<option value="">Sélectionnez le pays</option>
		<?php
		foreach($results as $pays) {
		?>
		<option value="<?php echo $pays["id"]; ?>"><?php echo $pays["name"]; ?></option>
		<?php
		}
		?>
		</select>
	</div>
	<div>
		<label>Ville:</label><br/>
		<select name="ville" id="list-ville">
		<option value="">Sélectionnez la ville</option>
		</select>
	</div>
</div>

Récupérer les villes en utilisant AJAX et jQuery :

Le script jQuery suivant montre une fonction permettant d’envoyer une requête AJAX à PHP afin que la liste de villes lue dépend du pays sélectionné. Cet appel AJAX est défini avec l’ID de pays sélectionné.

function getVille(val) {
	$.ajax({
	type: "POST",
	url: "get_ville.php",
	data:'id_pays='+val,
	success: function(data){
		$("#list-ville").html(data);
	}
	});
}

Lire la base de données de villes avec PHP :

En PHP, on se connecte avec la base de données pour récupérer les valeurs de la table « villes » en fonction de l’ID de pays transmis par l’appel AJAX. Il forme des options de liste déroulante de ville et renvoie la réponse AJAX. Cette réponse est insérée dans la liste déroulante des villes.

<?php
require_once("database.php");
$db = new DB();
if(!empty($_POST["id_pays"])) {
	$query ="SELECT * FROM villes WHERE id_pays = '" . $_POST["id_pays"] . "'";
	$results = $db->runQuery($query);
?>
	<option value="">Sélectionnez la ville</option>
<?php
	foreach($results as $ville) {
?>
	<option value="<?php echo $ville["id"]; ?>"><?php echo $ville["name"]; ?></option>
<?php
	}
}
?>