Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

[JQuery] Liste déroulantes dynamiques ?

Pays, département, ville ...

1 2 >>

Sujet résolu

6 janvier 2011 à 22:22:39

Bonjour à tous !

Encore une question bête comme j'en pose souvent !

Je voudrai savoir comment faire en AJAX Avec JQuery des listes déroulantes dynamique liées et reliées à la BDD ?

En gros, on choisit un pays, ça affiche les départements, ça affiche les villes etc

Et tout ça avec JQuery ?

Merci beaucoup !

6 janvier 2011 à 22:29:52

Montre le HTML, puis la structure des tables avec nom des champs.

Voici comment je ferais :

Au changement du pays on récupère la valeur (onchange)
On envoie la valeur à un script PHP qui nous sort toutes les villes (exemple) sous forme de JSON
Avec une fonction de callback on traite le JSON en bouclant dessus pour créer la liste

http://chez-syl.fr/

6 janvier 2011 à 22:48:38

Désolé,
Je n'ai pas encore fais le code HTML etc ...

Je vais avoir 3 tables :
pays(id_pays, pays);
departement(id_dep, id-pays departement);
ville(id_ville, id_dep, ville);

Donc mon code HTML va ressembler à un truc comme ça :

<tr>
    <td>Pays</td>
    <td>
    <select name="pays">

<?php
$query = "SELECT pays  FROM pays ORDER BY pays";
$result = mysql_query($query);

while($row = mysql_fetch_array($result)){
echo '<option >'.$row["pays"].'</option>';
}
?>
     </select>
     </td> 
</tr>

 <tr> 
  <td>Département</td>
 <td>
<select name="departement">

<?php

$query = "SELECT id_dep, departement  FROM departement where pays.pays = FRANCE ORDER BY departement";
$result = mysql_query($query);

while($row = mysql_fetch_array($result)){
echo '<option value="'.$row["id_dep"].'">'.$row["departement"].'</option>';
}

?>
   </select>
   </td>
</tr>

<tr>
    <td>Ville</td>
    <td>
<select name="ville">
	
<?php
$query = "SELECT ville  FROM ville where id_dep.ville = $row["id_dep"] ORDER BY ville";
$result = mysql_query($query);

while($row = mysql_fetch_array($result)){
echo '<option value="'.$row["id_ville"].'">'.$row["ville"].'</option>';
}
?>

   </select>
   </td>
</tr>

6 janvier 2011 à 23:00:44

A mon avis tu devrais laisser la première partie qui va charger tous les pays, et ensuite mettre 2 select vides, qui seront remplis avec le JS.

Fais le gestionnaire d'événement jQuery qui va récupérer la valeur sélectionnée dans ta première liste déroulante puis fais un appel Ajax. Tu as des éléments de réponse ici.

http://chez-syl.fr/

6 janvier 2011 à 23:07:40

Donc si j'ai bien compris,
Je peux utiliser la méthode $.ajax que tu m'avais expliqué, en data, je lui fourni la valeur du champ select du pays, dans le fichier PHP que j'appelle je sélectionne les départements que je peux afficher dans un SELECT ?

Dans ces cas là, plusieurs questions :
- La fonction AJAX ne doit pas s'exécuter au submit du formulaire mais quand on a fais un choix sur le select, quel event gère ça ?
- J'utilise ensuite la fonction parseJSON ?

Je sais que la requête AJAX va pouvoir me retourner des données, mais est ce que je vais pouvoir remplir un SELECT avec ça ?

6 janvier 2011 à 23:12:04

Je t'ai dit plus haut que c'était l'événement onchange.

Mais en jQuery on enlève toujours le "on".

Ensuite dans ton PHP tu fais ton super SELECT, tu mets un while() pour sortir les données et tu mets tout dans un tableau temporaire qui sera transformé en JSON, puis parseJSON pour parcourir ce tableau.

<?php
$tab = array();
$requete = "SELECT...";
$resultat = $bdd->query($requete);
while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
$tab[] = $donnees['ville'];
}
echo json_encode($tab);
?>

http://chez-syl.fr/

6 janvier 2011 à 23:17:06

Que fais la fonction json_encode ?
Cela va afficher les données sous quelle format ?

Donc dans la fonction success $.ajax je suis censé précisé que les données retournées, soit : grace à json_encode($tab) soit afficher dans un select ?

6 janvier 2011 à 23:19:40

La doc t'en dira plus que moi sur json_encode().

Dans $.ajax() tu n'oublies surtout pas de préciser le dataType: 'json' ensuite tu peux suivre mon post que j'ai fait sur l'autre sujet, en adaptant un petit peu.

http://chez-syl.fr/

6 janvier 2011 à 23:23:39

D'accord !

Donc gràce à ça que je peux ajouter les valeurs dans les champs ?

function parseJSON(json) {
	var $resultat = $('#resultat');
	
	$resultat.html('Résultat :<br />');
	
	$resultat.append(json.login+'<br />');
	$resultat.append(json.pass+'<br />');
}

La fonction append() peut-elle être utilisée dans une liste ?

6 janvier 2011 à 23:32:49

Oui heureusement, tu pourrais essayer ça :

function parseJSON(json) {
	var $selectVille = $('select[name="ville"]');
	
		for(var key in json) {
		$selectVille.append('<option value="'+json[key].ville+'">'+json[key].ville+'</option>');
		}
}

http://chez-syl.fr/

6 janvier 2011 à 23:40:52

Mais cela ne remplace pas une boucle while ? Si ? Car que vaut key ?

6 janvier 2011 à 23:44:22

Key vaudra le numéro en cours, ce n'est pas important, ce qui t'intéresse toi c'est le .ville.
Cette boucle correspond à ceci en PHP :

<?php
for($i = 0; $i < count($array); $i++) {
echo $array[$i];
}
// OU
foreach($array as $valeur) {
echo $valeur;
}
?>

http://chez-syl.fr/

9 janvier 2011 à 12:39:56

Salut !

Je viens d'essayer avec l'exemple que tu m'as donné.

En fait, on entre le code postal dans un champ.

Ce que je voudrai faire, il n'y a qu'une ville de retournée, alors elle apparaît dans un input,
si il y en a plusieurs elles apparaissent dans une liste de type select.

J'ai donc utilisé ton exemple mais ça ne marche pas :s ... Ou est l'erreur ?

function parseJSON(json) {
            var $selectVille = $('select[name="ville"]');

            for(var key in json) {
                $selectVille.append('<option value="'+json[key].Ville+'">'+json[key].Ville+'</option>');
            }
        }

        $.ajax({
            type: 'POST',
            url: 'js/Ajax-PHP/inscription2.php',
            dataType: 'json',
            data: $(this).serialize(),
            success:
            function(json) {
                parseJSON(json);
            }
        });

Et dans le fichier php :

<?php 
$pays = $_POST['pays'];
$cp = $_POST['cp'];

if (!empty($cp)) {
    $requete = mysql_query("SELECT * from cp WHERE pays = '$pays' AND cp = '$cp'") or die("Impossible de sélectionner l'email : " . mysql_error());
    while ($result = mysql_fetch_assoc($requete)) {
        $ville = $result['Ville'];
    }
    echo json_encode($ville);
}
?>

Ca devrait marcher ?
Mais ce n'est pas le cas :s

9 janvier 2011 à 13:50:37

Dans ton vrai code tu as bien séparé $.ajax() et parseJSON() ? Ce dernier ne doit pas être dans le .ready().

Ligne 8 de ton PHP c'est $ville[] =

http://chez-syl.fr/

9 janvier 2011 à 14:04:35

function parseJSON(json) {
    var $selectVille = $('select[name="ville"]');

    for(var key in json) {
        $selectVille.append('<option value="'+json[key].Ville+'">'+json[key].Ville+'</option>');
    }
}

$(function(){
    $("#inscription").submit(function(){

Je l'ai mise au début du fichier JS que j'inclus !

Et pour PHP c'est corrigé mais ça ne change strictement rien :s

9 janvier 2011 à 14:24:21

Bon bah c'est pas simple de t'aider à l'aveuglette, si tu veux que je t'aide davantage il va falloir que tu me donnes tous les éléments : HTML + JS + SQL complets.

http://chez-syl.fr/

9 janvier 2011 à 14:33:26

Voilà ma structure SQL :

Champ Type Interclassement Attributs Null Défaut Extr
CP varchar(5) latin1_swedish_ci Non
Ville varchar(50) latin1_swedish_ci Non
Pays varchar(40) latin1_swedish_ci Non

Ensuite toute ma page JS :

function parseJSON(json) {
    var $selectVille = $('select[name="ville"]');

    for(var key in json) {
        $selectVille.append('<option value="'+json[key].Ville+'">'+json[key].Ville+'</option>');
    }
}

$(function(){
    $("#inscription").submit(function(){

        valid = true;

        if($("#pseudo2").val() == ""){
            $("#pseudo2").next(".error-input").fadeIn().text("Veuillez entrer votre pseudo.");
            valid = false;
        }
        else if(!$("#pseudo2").val().match(/^[a-z0-9A-Z._-]+$/)) {
            $("#pseudo2").next(".error-input").fadeIn().html("Le pseudo n'est pas au format valide.");
            valid = false;
        }
        else
        {
            $("#pseudo2").next(".error-input").fadeOut();
        }

        if($("#pseudo2").val().length > 40){
            $("#pseudo2").next(".error-input").fadeIn().text("La taille du pseudo doit être comprise entre 2 et 40 caractères.");
            valid = false;
        }

        if($("#pseudo2").val().length < 2){
            $("#pseudo2").next(".error-input").fadeIn().text("La taille du pseudo doit être comprise entre 2 et 40 caractères.");
            valid = false;
        }

        if($("#password2").val() == ""){
            $("#password2").next(".error-input").fadeIn().text("Veuillez entrer votre mot de passe.");
            valid = false;
        }
        else if(!$("#password2").val().match(/^[a-z0-9A-Z._-]+$/)) {
            $("#password2").next(".error-input").fadeIn().text("Le mot de passe n'est pas au format valide.");
            valid = false;
        }
        else
        {
            $("#password2").next(".error-input").fadeOut();
        }

        if($("#password2").val().length > 40){
            $("#password2").next(".error-input").fadeIn().text("La taille du mot de passe doit être comprise entre 2 et 40 caractères.");
            valid = false;
        }

        if($("#password2").val().length < 2){
            $("#password2").next(".error-input").fadeIn().text("La taille du mot de passe doit être comprise entre 2 et 40 caractères.");
            valid = false;
        }

        if($("#confirmation").val() == ""){
            $("#confirmation").next(".error-input").fadeIn().text("Veuillez entrer la confirmation de mot de passe.");
            valid = false;
        }
        else if(!$("#confirmation").val().match(/^[a-z0-9A-Z._-]+$/)) {
            $("#confirmation").next(".error-input").fadeIn().text("La confirmation du mot de passe n'est pas au format valide.");
            valid = false;
        }
        else
        {
            $("#confirmation").next(".error-input").fadeOut();
        }

        if($("#confirmation").val() != $("#password2").val()) {
            $("#confirmation").next(".error-input").fadeIn().text("Le mot de passe de confirmation doit être identique au mot de passe.");
            valid = false;
        }

        if($("#email").val() == ""){
            $("#email").next(".error-input").fadeIn().text("Veuillez entrer un email.");
            valid = false;
        }
        else if(!$("#email").val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,4}$/)) {
            $("#email").next(".error-input").fadeIn().text("L'email n'est pas au format valide.");
            valid = false;
        }
        else
        {
            $("#email").next(".error-input").fadeOut();
        }

        var $conditions = $('input[name=conditions]');
        if($conditions.is(':checked')) {
            $conditions.next('.error-input').fadeOut();
        }
        else {
            $conditions.next('.error-input').fadeIn().text('Vous devez accepter les conditions d\'utilisation.');
            valid = false;
        }

        // Pour la date de naissance
        if($("#day").val() == ""){
            $("#year").next(".error-input").fadeIn().text("Veuillez compléter la date de naissance.");
            valid = false;
        }

        if($("#month").val() == ""){
            $("#year").next(".error-input").fadeIn().text("Veuillez compléter la date de naissance.");
            valid = false;
        }
        
        if($("#year").val() == ""){
            $("#year").next(".error-input").fadeIn().text("Veuillez compléter la date de naissance.");
            valid = false;
        }
        else if(($("#day").val() != "") && ($("#month").val() != ""))
        {
            $("#year").next(".error-input").fadeOut();
        }

        if($("#day").val().length <= 1){
            $("#year").next(".error-input").fadeIn().text("Le jour de naissance doit être au format : JJ et non pas J.");
            valid = false;
        }

        if($("#month").val().length <= 1){
            $("#year").next(".error-input").fadeIn().text("Le mois de naissance doit être au format : MM et non pas M.");
            valid = false;
        }

        if($("#year").val().length != 4){
            $("#year").next(".error-input").fadeIn().text("L'année naissance doit être au format : AAAA et non pas AA.");
            valid = false;
        }

        if(($("#day").val() >= 01) && ($("#day").val() <= 31)) {}
        else {
            $("#year").next(".error-input").fadeIn().text("Le jour de naissance doit être un chiffre compris entre 01 et 31.");
            valid = false;
        }
        
        if(($("#month").val() >= 01) && ($("#month").val() <= 12)) {}
        else {
            $("#year").next(".error-input").fadeIn().text("Le mois de naissance doit être un chiffre compris entre 01 et 12.");
            valid = false;
        }

        if(($("#year").val() >= 1890) && ($("#month").val() <= 2500)) {}
        else {
            $("#year").next(".error-input").fadeIn().text("Le date de naissance doit être un nombre.");
            valid = false;
        }

        // Pour le captcha
        if($("#captcha").val() != ""){
            valid = false;
        }
        
        var day = $("#day").val();
        var month = $("#month").val();
        var year = $("#year").val();
        var age = 18;
        var mydate = new Date();
        mydate.setFullYear(year, month-1, day);

        var currdate = new Date();
        currdate.setFullYear(currdate.getFullYear() - age);

        if ((currdate - mydate) < 0){
            $("#year").next(".error-input").fadeIn().text("Vous devez être majeur pour vous      inscrire.");
            valid = false;
        }
   

        // La partie AJAX
        $.ajax({
            type: 'POST',
            url: 'js/Ajax-PHP/inscription.php',
            data: $(this).serialize(),
            success:
            function(result) {
                if(result=='1') {
                    $("#pseudo2").next(".error-input").fadeIn().html("Le pseudo est déjà pris.")
                }
                if(result=='2') {
                    $("#email").next(".error-input").fadeIn().html("L'email est déjà pris.")
                }

                if(result=='123'){
                    $("#pseudo2").next(".error-input").fadeIn().html("Le pseudo est déjà pris.");
                    $("#email").next(".error-input").fadeIn().html("L'email est déjà pris.");
                }
            }
        });

        $.ajax({
            type: 'POST',
            url: 'js/Ajax-PHP/inscription2.php',
            dataType: 'json',
            data: $(this).serialize(),
            success:
            function(json) {
                parseJSON(json);
            }
        });
        
        return valid;
    });
});

Et le code HTML

<label for="pays">Dans quel pays habitez-vous ?</label><br> 
    <select name="pays" id="pays"> 
        <option value="france">France</option> 
        <option value="espagne">Belgique</option> 
    </select> 
    <div class="error-input">Erreur</div><br><br> 
    <label for='cp'>Code postal : </label><input type='text' name='cp' id='cp'><div class="error-input">Erreur</div><br><br>   
 <label for="pays">Dans quelle ville habitez-vous ?</label><br> 
    <select name="ville" id="ville"> 
 <option value="test">Test</option> 
    </select> 
   <!-- <label>Votre ville :</label>
    <input type="ville" id="ville" readonly style="background-color:grey"/> --> 
    <div class="error-input">Erreur</div><br><br>

9 janvier 2011 à 14:43:37

Ton code SQL qui créé la table avec les données, histoire que je puisse tester.

http://chez-syl.fr/

9 janvier 2011 à 14:58:20

--
-- Structure de la table `cp`
--

CREATE TABLE `cp` (
`CP` varchar(5) NOT NULL default '',
`Ville` varchar(50) NOT NULL default '',
`Pays` varchar(40) NOT NULL default ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `cp`
--

INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('64460', 'AAST', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('55130', 'ABAINVILLE', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('59265', 'ABANCOURT', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('60220', 'ABANCOURT', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('54610', 'ABAUCOURT', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('55400', 'ABAUCOURT HAUTECOURT', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('25320', 'ABBANS DESSOUS', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('25440', 'ABBANS DESSUS', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('44170', 'ABBARETZ', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('20243', 'ABBAZIA', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('60430', 'ABBECOURT', 'FRANCE');
INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES ('02300', 'ABBECOURT', 'FRANCE');

9 janvier 2011 à 19:30:16

J'ai fait ceci qui fonctionne :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#myform').submit(function() {	
		$.ajax({
			type: 'POST',
			url: 'page.php',
			data: $(this).serialize(),
			dataType: 'json',
			success:
				function(json) {
					parseJSON(json);
				}
		});
		return false;
	});	
});
function parseJSON(json) {
	var $selectVille = $('select[name="ville"]');
	$selectVille.empty();
	
	for(var key in json) {
		$selectVille.append('<option value="'+json.Ville+'">'+json[key]+'</option>');
	}
}
</script>
<form id="myform">
<label for="pays">Dans quel pays habitez-vous ?</label>
<select name="pays" id="pays"> 
	<option value="france">France</option> 
	<option value="espagne">Belgique</option> 
</select><br /><br />

<label for='cp'>Code postal : </label>
<input type='text' name='cp' id='cp'><br /><br />

<label for="pays">Dans quelle ville habitez-vous ?</label>
<select name="ville" id="ville"> 
</select><br /><br />

<input type="submit" value="Récupérer les villes" />
</form>

<?php 
$pays = $_POST['pays'];
$cp = $_POST['cp'];

mysql_connect('localhost', 'root', '');
mysql_select_db('test');

if(!empty($cp)) {
    $requete = mysql_query("SELECT * from cp WHERE pays = '". $pays ."' AND cp = '". $cp ."'");
    while ($result = mysql_fetch_assoc($requete)) {
        $ville[] = $result['Ville'];
    }
    echo json_encode($ville);
}
?>

http://chez-syl.fr/

10 janvier 2011 à 13:32:41

Salut !
Merci à toi mais ça ne fait strictement rien, je ne comprends pas ?

<label for="pays">Dans quel pays habitez-vous ?</label><br> 
    <select name="pays" id="pays"> 
        <option value="france">France</option> 
        <option value="belgique">Belgique</option> 
    </select> 
    <div class="error-input">Erreur</div><br><br> 
    <label for='cp'>Code postal : </label><input type='text' name='cp' id='cp'  ><div class="error-input">Erreur</div><br><br>    <label for="ville">Dans quel pays habitez-vous ?</label><br> 
    <select name="ville" id="ville"> 
    </select>

Le JS

function parseJSON(json) {
    var $selectVille = $('select[name="ville"]');
    $selectVille.empty();

    for(var key in json) {
        $selectVille.append('<option value="'+json.Ville+'">'+json[key]+'</option>');
    }
}


$.ajax({
            type: 'POST',
            url: 'js/Ajax-PHP/inscription2.php',
            data: $(this).serialize(),
            dataType: 'json',
            success:
            function(json) {
                parseJSON(json);
            }
        });

Et le PHP...

<?php
$pays = $_POST['pays'];
$cp = $_POST['cp'];

if(!empty($cp)) {
    $requete = mysql_query("SELECT * from cp WHERE pays = '". $pays ."' AND cp = '". $cp ."'");
    while ($result = mysql_fetch_assoc($requete)) {
        $ville[] = $result['Ville'];
    }
    echo json_encode($ville);
}
?>

Pourtant c'est pareil non ?

10 janvier 2011 à 13:43:56

Et la balise <form> elle est où ?

http://chez-syl.fr/

10 janvier 2011 à 13:53:44

Elle n'est pas là car je n'ai mis qu'une partie de mon formulaire ... Je ne comprends pas. Les requêtes Ajax de vérification marchent mais pourquoi pas ça ?

10 janvier 2011 à 14:05:06

Déjà as-tu essayé mon code seul ? Sans le reste de ta page ? Ton form a bien pour id myform ?

http://chez-syl.fr/

10 janvier 2011 à 14:13:12

Mon form a pour id :

$("#inscription").submit(function(){

Ta page ne marche pas chez moi, ça ne fait strictement rien :s

10 janvier 2011 à 14:24:41

Essaye de débugger tout seul... Tu fais des echo, des alert, tu regardes avec Firebug...

http://chez-syl.fr/

10 janvier 2011 à 14:41:50

Oui mais pourquoi ça marcherait chez toi et pas chez moi ? C'est ça que je ne comprends pas.

Quand j'enlève le fait que les data soit en JSON ça marche et ça me retourne des choses alors qu'une fois que je mets JSON hop, plus rien ! même quand je mets un alert ! Rien ! Ca mets juste NULL quand je valide le formulaire sans rien.

Le problème est que même quand je mets :

function(data) {
alert(data);
}

Et que dans le fichier php je fais juste un echo du $_POST['pays'], ça ne marche pas !

10 janvier 2011 à 14:43:50

Montre-moi un bête exemple complet et je te dirai.

http://chez-syl.fr/

10 janvier 2011 à 14:52:41

<?php 
$pays = $_POST['pays'];
$cp = $_POST['cp'];

if(!empty($cp)) {
    $requete = mysql_query("SELECT * from cp WHERE pays = '". $pays ."' AND cp = '". $cp ."'");
    while ($result = mysql_fetch_assoc($requete)) {
        $ville[] = $result['Ville'];
    }
    echo json_encode($ville);
}
?>

J'essais un alert pour voir ce que c'est censé afficher :

$(document).ready(function(){
                $('#myform').submit(function() {
                    $.ajax({
                        type: 'POST',
                        url: 'page.php',
                        data: $(this).serialize(),
                        dataType: 'json',
                        success:
                            function(json) {
                            alert(json);
                        }
                    });
                    return false;
                });
            });

Mais cela ne fait rien.

10 janvier 2011 à 14:55:00

Essaye en localhost
Retire au plus vite l'identifiant et mot de passe de ta bdd

J'édite après.

CREATE TABLE IF NOT EXISTS `cp` (
  `CP` varchar(5) NOT NULL DEFAULT '',
  `Ville` varchar(50) NOT NULL DEFAULT '',
  `Pays` varchar(40) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Contenu de la table `cp`
--

INSERT INTO `cp` (`CP`, `Ville`, `Pays`) VALUES
('64460', 'AAST', 'FRANCE'),
('55130', 'ABAINVILLE', 'FRANCE'),
('59265', 'ABANCOURT', 'FRANCE'),
('60220', 'ABANCOURT', 'FRANCE'),
('54610', 'ABAUCOURT', 'FRANCE'),
('55400', 'ABAUCOURT HAUTECOURT', 'FRANCE'),
('25320', 'ABBANS DESSOUS', 'FRANCE'),
('25440', 'ABBANS DESSUS', 'FRANCE'),
('44170', 'ABBARETZ', 'FRANCE'),
('20243', 'ABBAZIA', 'FRANCE'),
('60430', 'ABBECOURT', 'FRANCE'),
('02300', 'ABBECOURT', 'FRANCE');

<?php 
$pays = $_POST['pays'];
$cp = $_POST['cp'];

mysql_connect("localhost", "root", "") or die("Impossible de se connecter : " . mysql_error());
mysql_select_db("test") or die("Impossible de se connecter : " . mysql_error());

if(!empty($cp)) {
    $requete = mysql_query("SELECT * from cp WHERE pays = '". $pays ."' AND cp = '". $cp ."'");
    while ($result = mysql_fetch_assoc($requete)) {
        $ville[] = $result['Ville'];
    }
    echo json_encode($ville);
}
?>

<html>
<head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            function parseJSON(json) {
                var $selectVille = $('select[name="ville"]');
                $selectVille.empty();

                for(var key in json) {
                    $selectVille.append('<option value="'+json.Ville+'">'+json[key]+'</option>');
                }
            }

            $(document).ready(function(){
                $('#myform').submit(function() {
                    $.ajax({
                        type: 'POST',
                        url: 'page.php',
                        data: $(this).serialize(),
                        dataType: 'json',
                        success:
                            function(json) {
                            parseJSON(json);
                        }
                    });
                    return false;
                });
            });

        </script>
    </head>
    <body>
        <form id="myform" name="myform">
            <label for="pays">Dans quel pays habitez-vous ?</label>
            <select name="pays" id="pays">
                <option value="france">France</option>
                <option value="belgique">Belgique</option>
            </select><br /><br />

            <label for='cp'>Code postal : </label>
            <input type='text' name='cp' id='cp'><br /><br />

            <label for="pays">Dans quelle ville habitez-vous ?</label>
            <select name="ville" id="ville">
            </select>
            <br><br>
            <input type="submit" value="Envoyer" />
        </form>
    </body>
</html>

Je tape dans CP "64460" et dans la liste il me propose bien "AAST".

http://chez-syl.fr/

1 2 >>

[JQuery] Liste déroulantes dynamiques ?

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.