scanner plusieurs select en 5 lignes

flo3376
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
Réponse acceptée

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
Auteur
Réponse acceptée

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

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

Salut,
Pourquoi cette boucle ?

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

@plus
Pierre

Pierrot01

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