Choisir une valeur parmi plusieurs listes déroulantes

Bonjour,

voici mon problème : j'ai un formulaire qui affiche des listes déroulante selon les options :

pour le code HTML

<span id="1EMPRISES">

<label for="EMPRISES">Ordre des emprises ?</label><br />
<select name="EMPRISES" id="EMPRISES">
<option value="EMPRISE100">EMPRISE100</option>


</select>

</span>"

<span id="2EMPRISES">

<label for="EMPRISES">Ordre des emprises ?</label><br />
<select name="EMPRISES" id="EMPRISES">
<option value="EMPRISE100_50">EMPRISE100_50</option>
<option value="EMPRISE100_0">EMPRISE100_0</option>
<option value="EMPRISE100_50_0">EMPRISE100_50_0</option>
<option value="EMPRISE100_50_100">EMPRISE100_50_100</option>
<option value="EMPRISE100_0_100">EMPRISE100_0_100</option>
<option value="EMPRISE100_50_0_50_100">EMPRISE100_50_0_50_100</option>
<option value="EMPRISE100_0_100_0_100">EMPRISE100_0_100_0_100</option>
<option value="EMPRISE100_0_50_0_100">EMPRISE100_0_50_0_100</option>
<option value="EMPRISE100_50_100_0_100">EMPRISE100_50_100_0_100</option>

</select>"

</span>"

pour la partie java :

window.onload = function() {
  document.getElementById('1EMPRISES').style.display = 'block';
    document.getElementById('2EMPRISES').style.display = 'none';
}
function check_autre(option_selected) {
  if(option_selected == '1') {
    document.getElementById('1EMPRISES').style.display = 'block';
	document.getElementById('2EMPRISES').style.display = 'none';
  } else {
    document.getElementById('1EMPRISES').style.display = 'none';
	
  }
  if(option_selected == '2') {
    document.getElementById('2EMPRISES').style.display = 'block';
	 document.getElementById('1EMPRISES').style.display = 'none';
  } else {
    document.getElementById('2EMPRISES').style.display = 'none';
  }
}

cela fonctionne très bien sauf que quelque soit l’affichage, ma valeur retenue est toujours liée à celle de ma deuxième liste.

exemple :
- j'affiche 2 emprises et je choisi une valeur.
- je reclique sur "1 emrpise"

la valeur retenu n'est pas 1 emprise mais 2 emprises

Je voudrai que ma variable gardée ne soit que celle qui est "visible"

merci à vous !
Modifié par foldingo (26 Apr 2018 - 14:16)

Salut,

Tu peux nous le simuler sur https://codepen.io/pen/ ? car là il manque des trucs pour qu'on puisse tester.
Modifié par JENCAL (26 Apr 2018 - 15:58)

https://codepen.io/foldingo/pen/MGjrrb

je ne sais pas si ça aidera vraiment...
j'ai tout mis le code, mais la partie qui nous intéresse est la partie sur les "emprises"

à savoir que selon la valeur récupérée de l'emprise le dessin de la frame change (mais là vous ne pourrez pas voir)

Salut

Plusieurs ID EMPRISES, alors qu'un ID doit être unique dans la page web.

Pour querySelector(), il doit commencer par un caractère alphabétique [a-zA-z]. Il peut contenir des chiffres, mais pas dans le premier caractère.

Exemple

<label for="NbEmprises"> Nombre d'emprises ?</label>
<select name="NbEmprises" id="NbEmprises">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">Plus que 4</option>
</select>
<span id="spanEmprises1">
    <label for="Emprises1">Ordre des emprises ?</label>
    <br />
    <select name="Embrises1" id="Emprises1">
        <option value="Emprise100">Emprise100</option>
    </select>
</span>
<span id="spanEmprises2">
    <label for="Emprises2">Ordre des emprises ?</label>
    <select name="Emprises2" id="Emprises2">
        <option value="Emprise100_50">Emprise100_50</option>
        <option value="Emprise100_0">Emprise100_0</option>
        <option value="Emprise100_50_0">Emprise100_50_0</option>
        <option value="Emprise100_50_100">Emprise100_50_100</option>
        <option value="Emprise100_0_100">Emprise100_0_100</option>
        <option value="Emprise100_50_0_50_100">Emprise100_50_0_50_100</option>
        <option value="Emprise100_0_100_0_100">Emprise100_0_100_0_100</option>
        <option value="Emprise100_0_50_0_100">Emprise100_0_50_0_100</option>
        <option value="Emprise100_50_100_0_100">Emprise100_50_100_0_100</option>
    </select>
</span>

window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible

    // début code du test

    const
        elemSpanEmprises1 = document.querySelector('#spanEmprises1'),
        elemSpanEmprises2 = document.querySelector('#spanEmprises2'),
        elemNbEmprises = document.querySelector('#NbEmprises');

    elemSpanEmprises1.style.display = 'block';
    elemSpanEmprises2.style.display = 'none';

    elemNbEmprises.addEventListener('change', ev => {
        let optionSelected = ev.target.value;

        if (optionSelected === '1') {
            elemSpanEmprises1.style.display = 'block';
            elemSpanEmprises2.style.display = 'none';
        } else {
            elemSpanEmprises1.style.display = 'none';
        }

        if (optionSelected === '2') {
            elemSpanEmprises2.style.display = 'block';
            elemSpanEmprises1.style.display = 'none';
        } else {
            elemSpanEmprises2.style.display = 'none';
        }
    }, {
        capture: false,
        passive: true,
        once: false
    });


    // fin code du test
}, {
    capture: false,
    passive: true,
    once: false
});