Bonjour

J'ai un formulaire avec une dizaine de champs, dont 2 me posent problème :

- Un champ INPUT dans lequel on saisit un Code localisation (code postal ou un code département)
- Un champ SELECT avec une liste de villes.

Un petit script (JQuery+Ajax) met à jour dynamiquement le contenu du champ SELECT en fonction des changements du champ INPUT.
Exemple : si on saisit 92 dans le champ INPUT, le champ SELECT est instantanément modifié pour contenir la liste des villes du département des 92/Hauts de Seine.

A la validation du formulaire (en php), lorsqu'il y a une erreur de saisi utilisateur sur l'un des 10 champs, je renvoie le formulaire entier avec les valeurs saisies pour chaque champ + les messages d'erreurs associés.
Problème : Je parviens à récupérer la valeur du champ INPUT précédemment saisi, mais impossible de récupérer celle du champ SELECT pour re-selectionner la ville choisie.
Exemple : pour le département 92, si l'utilisateur a sélecté la 10ieme ville de la liste ; alors dans le formulaire ressoumi pour correction, le champ SELECT pointe sur la 1iere ville de la liste et non pas la 10ieme !!

Comment faire pour que soit re-sélectée la ville choisie précédemment ?

HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<form enctype="multipart/form-data" action="" method="post">
    ...
    <input type="text" name="codeLocalisation" id="codeLocalisation" value="" />
    ...
    <select name="ville" id="ville"></select>
    ...
</form>

JAVASCRIPT
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(document).ready(function() {
    ...
    /* Mise à jour de la liste des villes lorsque code localisation est modifié */
    $('input#codeLocalisation').change(function() {
        majListeCommunes ();
    });
 
    /* Lors du chargement du formulaire, si la valeur du code localisation est non nulle, on charge la liste des communes associées */
    if($('input#codeLocalisation').val() != null) {
        majListeCommunes();
    };
})
 
/* [AJAX] Mise à jour de la liste des communes */
function majListeCommunes () {
    $('body').css('cursor', 'wait');
    var reponse = 
        $.ajax({
            type: 'POST',
            url: '/ajax/getvilles',
            data: {
                format: "json",
                codeLocalisation: $("input#codeLocalisation").val()
            },
            success: function(reponse) {
 
                reponse = eval(reponse);
                listeCommunes = reponse.contenu;
                var options = "";
                var optionSelection = "";
                if(listeCommunes != null) {
                    for( var i=0; i < listeCommunes.length; i++) {
                        options += '<option value="' + listeCommunes[i].ID + '">' + listeCommunes[i].NOM + '</options>';
                    };
                    $("select#ville").append(options);
                    /* On selectionne par défaut le premier élément de la liste si 
                       une ville n'est pas déjà sélectionnée */
                    if($("select#ville").val() == null) {
                        $("select#ville").val(listeCommunes[0].ID);
                    }
                };
            },
            complete: function(XMLHttpRequest, textStatus) {},
            dataType: "json",
            timeout: 4000,
        });
    $('body').css('cursor', 'default');
};
Je pense que ce m.... entre les lignes 36 et 40 du JS, mais je ne sais pas où.
(je précise que le reste marche : ajax, mise à jour de la liste sur changement du champ INPUT, .... etc)

Merci pour votre aide,