Bonjour à tous, 

Dans un formulaire, je souhaite que quand il est rentré le code postal, j'incrémente mon <select> avec les options de la requête fetch(). 

Tout va bien, sauf que j'ai utilisé new Option et du coup il ajoute l'option au précédent. Et je pense que createElement risque de me supprimer la première option si il y en a deux.

Je voudrais qu'il mette simplement toutes les villes correspondant au code postal si il y en a plusieurs. 

Je ne vois pas sur quoi me tourner pour l'avoir comme je veux

HTML

    <input type="number" name="cp" value="cp" onchange="getCP(this.value)">   
        <select name="ville" id="ville">
        <!--Villes avec code postal-->
    </select>

JS 

<script>
function getCP(cp) {
 
//
//    fetch('../pages/cp.php?cp='+cp+'')
//        .then(console.log)
    var cp = cp;
    const getVille = async function(){
        try{
            let response = await fetch('../pages/cp.php?cp='+cp)
            if(response.ok){
                let data = await response.json()
                console.log(data.length)
                console.log(data)
                for( var i=0; i<data.length; i++){
                   var ville = new Ville(data[i].ville_nom, data[i].departement_nom);
                    console.log(ville);
                    ville.getNom();
                }

            }else{
                console.error('retour du serveur:'+response.status)
            }
        }catch(e){
            console.log(e);
        }
    }
getVille();
}
</script>

class JS

class Ville{
    constructor(nom, departement){
        this.nom = nom;
        this.departement = departement;
    }
    getNom(){

        var select = document.getElementById("ville");
        select.options[select.options.length] = new Option (this.nom, this.nom);
    }

-
Edité par born1 19 janvier 2019 à 18:19:50

Bonjour!

Vide premièrement ton select avant de le remplir.

var select = document.getElementById("ville");
select.options.length = 0;

En passant, a mon avis, tu ne devrais pas laisser une classe s'ajouter dans une liste soi-même. Une Ville ne peut s'ajouter à une liste d'elle même.C'est le contenant qui s'ajoute un contenu.Je veut dire par là que la méthode getNom n'a pas sa place dans la classe ville, à première vue, cette méthode devrais me renvoyer le nom de la ville (getter ou accesseur).

En plus si tu n'utilise pas les occurrences de la classe Ville ailleurs, sa ne te sert à rien à implémenter la classe ville.

voici ton code avec quelques lignes modifiées (classe Ville non pris en compte)

<script>
function getCP(cp) {
  
//
//    fetch('../pages/cp.php?cp='+cp+'')
//        .then(console.log)
    var cp = cp;
    const getVille = async function(){
        try{
            let response = await fetch('../pages/cp.php?cp='+cp)
            if(response.ok){
                let data = await response.json()
                console.log(data.length);
                console.log(data);
                var select = document.getElementById("ville");
                // On vide la liste
                select.options.length = 0;
                for( var i=0; i<data.length; i++){
                   select.options[select.options.length] = new Option (data[i].ville_nom, data[i].ville_nom);
                }
 
            }else{
                console.error('retour du serveur:'+response.status)
            }
        }catch(e){
            console.log(e);
        }
    }
getVille();
}

J'espère que cela pourra t'aider.

-
Edité par Duckerson 20 janvier 2019 à 3:02:21

Duckerson a écrit:

Bonjour!

Vide premièrement ton select avant de le remplir.

var select = document.getElementById("ville");
select.options.length = 0;

En passant, a mon avis, tu ne devrais pas laisser une classe s'ajouter dans une liste soi-même. Une Ville ne peut s'ajouter à une liste d'elle même.C'est le contenant qui s'ajoute un contenu.Je veut dire par là que la méthode getNom n'a pas sa place dans la classe ville, à première vue, cette méthode devrais me renvoyer le nom de la ville (getter ou accesseur).

En plus si tu n'utilise pas les occurrences de la classe Ville ailleurs, sa ne te sert à rien à implémenter la classe ville.

voici ton code avec quelques lignes modifiées (classe Ville non pris en compte)

<script>
function getCP(cp) {
  
//
//    fetch('../pages/cp.php?cp='+cp+'')
//        .then(console.log)
    var cp = cp;
    const getVille = async function(){
        try{
            let response = await fetch('../pages/cp.php?cp='+cp)
            if(response.ok){
                let data = await response.json()
                console.log(data.length);
                console.log(data);
                var select = document.getElementById("ville");
                // On vide la liste
                select.options.length = 0;
                for( var i=0; i<data.length; i++){
                   select.options[select.options.length] = new Option (data[i].ville_nom, data[i].ville_nom);
                }
 
            }else{
                console.error('retour du serveur:'+response.status)
            }
        }catch(e){
            console.log(e);
        }
    }
getVille();
}

J'espère que cela pourra t'aider.

-
Edité par Duckerson il y a environ 8 heures

BONJOUR, 

SUPER, MERCI, PARFAIT