addEventListener liste déroulante

Version imprimable

19/05/2018, 15h51
Mucral

1 pièce(s) jointe(s)

addEventListener liste déroulante

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 !

Pièce jointe 381942
19/05/2018, 20h30
danielhagnoul

:salut:

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.

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:

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.

19/05/2018, 21h26
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:

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:

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.

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:

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.

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

Code à corrigé :

Code:

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 }`);
            }
        }
    });
}