Discussion :

[Mucral]

Bonjour à tous !

Je suis entrain de faire projet en JS perso et j'ai un petit problème.

Je suis sur des menus déroulants en cascade.
Le premier appel le deuxième lui donner des données tout vas bien.
Mais en faite j'aimerais avoir les données quand je selectionne une option dans le deuxième menu déroulant.

Le problème étant quand je change de sélection il me donne les infos de toutes options.

Un peu compliqué a expliquer mais voici un bout de code sur l'image sous dessous.
Si besoins je peux expliquer plus dans les commentaires.
Mon site est hébergé si jamais vous voulez en voir un peu plus ou voir les logs.

Merci de votre aide !

[danielhagnoul]

On ne peut rien faire avec une image ! On ne peut pas tester un problème sans les codes (HTML, CSS, JS).

Vous devez poster une copie du code source de la page web, le bouton # de l'éditeur placera des balises .

Vous pouvez aussi fournir un lien vers la page web.

[Mucral]

Rebonjour,

Voici le lien du site : http://floriandjerbi.fr/wow/index.html

Vous pouvez voir sur le site, lors d'un changement de la 2ème liste dans la consol,e je reçoit toute les infos de tous les serveur et non pas de celui sélectionner.

En soit il n'y a rien sur le html et le css.
Je vous met le code JS juste à la suite.

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
const serveurListe = document.getElementById("serveur");
 
function serveursAjout(serv){
	serveurListe.innerHTML = "";
 
	var rien = document.createElement("option");
	rien.value = "rien";
	rien.innerHTML = "-- Choix du serveur --";
	serveurListe.appendChild(rien);
 
	for(var i = 0; i < serv.length; i++){
		const options = document.createElement("option");
		options.innerHTML = serv[i][2];
		options.info = new test(serv[i][0], serv[i][1], serv[i][2], serv[i][3], serv[i][4]);
		serveurListe.appendChild(options);
		serveurListe.addEventListener("change", options.info.toggleMarker.bind(options.info));
	}
}
 
 
 
class test{
	constructor(type, population, name, locale, status){
		this.type = type;
		this.population = population;
		this.name = name;
		this.locale = locale;
		this.status = status;
	}
 
	toggleMarker(info){
		console.log(this.type + " " + this.population + " " + this.name);
	}
}

Merci à vous de votre aide.

[danielhagnoul]

J'ai récupérer la totalité des vos codes sur le lien et j'ai commencé à les tester, mais je m'arrête, car il a trop d'erreurs signalées dans la console (F12).

Je vous conseille de commencer tous vos codes avec 'use strict'; en première instruction de vos fichiers JS.

Vous allez alors voir des messages d'erreurs dans la console, plusieurs variables ne sont pas déclarées. Je vous conseille de bannir var et de la remplacer par let ou const.

Dans la fonction ajaxGet() serv n'est pas déclaré et utilisé d'une manière qui me laisse dubitatif :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let i = 0; i < detail.length; i++) {
  serv = new serveur(detail[i]);
};

Tous les objets serv créés ne sont stockés nulle part et rattacher à rien. ou alors il faut écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let i = 0; i < detail.length; i++) {
  new serveur(detail[i]);
};

Lorsque vous aurez corrigé toutes les erreurs, merci de mettre en ligne le résultat et de poster un nouveau message.

[Mucral]

Bonsoir,

Merci bien des conseils j'ai encore beaucoup de chose à apprendre.

Je vais essayer de régler un peu les problèmes que vous m'avez déjà demandé de faire.
Je vais aussi me renseigner sur la différence entre "use strict" et "non strict pareil pour "let" et "const".


Avez vous du coup un peu mon problème de addEventListener ?

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
 
function serveursAjout(serv){
	serveurListe.innerHTML = "";
 
	let rien = document.createElement("option");
	rien.value = "rien";
	rien.innerHTML = "-- Choix du serveur --";
	serveurListe.appendChild(rien);
 
	for(let i = 0; i < serv.length; i++){
		const options = document.createElement("option");
		options.innerHTML = serv[i][2];
		options.info = new test(serv[i][0], serv[i][1], serv[i][2], serv[i][3], serv[i][4]);
		serveurListe.appendChild(options);
		serveurListe.addEventListener("change", options.info.toggleMarker.bind(options.info));
	}
}
 
 
 
class test{
	constructor(type, population, name, locale, status){
		this.type = type;
		this.population = population;
		this.name = name;
		this.locale = locale;
		this.status = status;
	}
 
	toggleMarker(info){
		console.log(this.type + " " + this.population + " " + this.name);
	}
}

J'ai bien changé les problèmes.
Je ne vois pas vraiment de différences mais surement du coter optimisation cela est mieux.


Merci de votre patience et de votre aide.

[danielhagnoul]

C'est mieux ! Moi et la console ont voit des différences.

Code à corrigé :

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
function serveursAjout(serv) {
    serveurListe.innerHTML = "";
 
    let rien = document.createElement("option");
    rien.value = "rien";
    rien.innerHTML = "-- Choix du serveur --";
    serveurListe.appendChild(rien);
 
    for (let i = 0; i < serv.length; i++) {
        let options = document.createElement("option");
 
        options.innerHTML = serv[i][2];
        options.info = new test(serv[i][0], serv[i][1], serv[i][2], serv[i][3], serv[i][4]);
 
        serveurListe.appendChild(options);
    }
 
    serveurListe.addEventListener("change", ev => {
        let arOptions = Array.from(ev.target.options);
 
        for (const [i, option] of arOptions.entries()) {
            // le premier élément, i = 0, est undefined !
 
            if (i > 0) {
                let oTest = option.info;
 
                console.log('***** i = ' + i + ' *****');
                console.log(`name = ${ oTest.name }`);
                console.log(`type = ${ oTest.type }`);
                console.log(`locale = ${ oTest.locale }`);
                console.log(`population = ${ oTest.population }`);
                console.log(`status = ${ oTest.status }`);
            }
        }
    });
}