scanner plusieurs select en 5 lignes

Par flo3376, il y a 8 ans

Javascript

Bonjour à tous,

Je suis en train de travailler sur un projet de carte google map relativement avancé et comme le programme commence à être relativement gros, je suis en train d'essayer d'arranger un peu le code.

J'ai une dizaine de select que je surveille et qui si ils changent écrivent leur valeur dans un tableau.

actuellement je code ressemble à cela

document.getElementById("AID_1").addEventListener("change", function() { AID_array[1]=document.getElementById("AID_1").value; }); document.getElementById("AID_2").addEventListener("change", function() { AID_array[2]=document.getElementById("AID_2").value; }); document.getElementById("AID_3").addEventListener("change", function() { AID_array[3]=document.getElementById("AID_3").value; }); document.getElementById("AID_4").addEventListener("change", function() { AID_array[4]=document.getElementById("AID_4").value; }); ......

est donc je souhaiterais faire quelque chose dans ce style là

for (var i = 0; i <=9; i++) { document.getElementById("AID_"+i).addEventListener("change", function() { console.log("AID_"+i); console.log(document.getElementById("AID_"+i).value); AID_array[0]=document.getElementById("AID_"+i).value; }); }

mais bien entendu celà ne marche pas.

il y a fort longtemps j'avais eu un besoin similaire, et quelqu'un d'ici m'avait soufflait la solution en passant pas la lecture des classe de mes select, mais je retrouve plus la discussion, et le programme qui utilisait cette méthode c'est échapper.

Pourriez vous m'aider.

Merci d'avance

Flo

5 réponses

Pierrot01, il y a 8 ans

Salut
html :

<select class="my_select" data-valuearray="1"> <select class="my_select" data-valuearray="2"> <select class="my_select" data-valuearray="3">

javascript :

document.getElementsByClassName("my_select").addEventListener("change", function() { AID_array[this.dataset.valuearray]=this.value; });

@plus

bon courage

Pierre

flo3376, il y a 8 ans

Malheureusement, le bout de code que tu as proposé ne passe pas. Cependant il m'a permit de comprendre quelque chose sur un autre script trouvé et j'ai pu réadapter.

var classname = document.getElementsByClassName("AID"); var AID_array_update = function() { //AID_array[this.dataset.valuearray]=this.value; //console.log(this.value); //console.log(this.name); var name=this.name; AID_array[name.replace("AID_", "")]=this.value; }; for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('change', AID_array_update, false); }
Huggy, il y a 8 ans

Tu peux aussi ne mettre qu'un seul listener et récupérer le target qui a déclenché le change

document.body.addEventListener("change", function(e) { console.log(e.target.id) }, false)
Pierrot01, il y a 8 ans

Salut,
Pourquoi cette boucle ?

for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('change', AID_array_update, false); }

@plus
Pierre

Pierrot01, il y a 8 ans

Salut,
Voila quelque chose qui fonctionne.
html :

<select name="Volvo" class="my_select" data-valuearray="1"> <option value="">Choisir</option> <option value="XC40">XC40</option> <option value="V40">V40</option> <option value="V60">V60</option> <option value="XC60">XC60</option> </select> <select name="renault" class="my_select" data-valuearray="2"> <option value="">Choisir</option> <option value="Trafic">Trafic</option> <option value="Scénic">Scénic</option> <option value="Twingo">Twingo</option> <option value="Espace">Espace</option> </select> <select name="mercedes" class="my_select" data-valuearray="3"> <option value="">Choisir</option> <option value="ml">ML</option> <option value="ClassR">Classe R</option> <option value="ClassS">Classe S</option> <option value="ClasseB">Class B</option> </select> <button id="binfo"> click pour valeur AID_array </button> <div id="info">

Javascript :

var AID_array = new Array(); (function() { document.querySelectorAll(".my_select").forEach(function(element) { element.addEventListener("change", function() { AID_array[this.dataset.valuearray]=this.value; }); }); document.getElementById("binfo").addEventListener("click", function(){ var str = ""; AID_array.forEach(function(element) { str = str + "\n" + element; }); document.getElementById("info").innerHTML = str; }); })();

Exemple ici

@plus
Pierre