Affichage de certaines données au Clic

**hichamus13** · 05/06/2020, 12h53

Bonjour tout le monde,
J'ai un menu déroulant exepmle1 et un autre exemple2.
Je veux, en cliquant sur RAS-RAS dans exemple1, je n'ai plus de choix dans exemple2 à part RAS.
Je vous montre le code que j'ai réussi à faire :

Code HTML :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<body>
<div class ="row">
<div class="col-sm-6">
       <div class="form-group">
    <label for="exemple1"> exemple1</label>
<select id="exemple1" class="form-control" required name="exemple1" onChange="check();">
 
   <option  value="RAS-RAS">RAS-RAS</option>
   <option  value="test">test</option>
   <option  value="test2">test2</option>
   <option  value="test3">test3</option>
   <option  value="test4">test4</option>
       </div>
    </div></select>
 
<div class="col-sm-6">
       <div class="form-group">
    <label for="exemple2"> exemple2</label>
<select id="exemple2" class="form-control" required name="exemple2">
 
   <option value="RAS">RAS</option>
   <option id ="2"  value="2">2</option>
   <option id ="3" value="3">3</option>
   <option id ="4" value="4">4</option>
   <option id ="5" value="5">5</option></select>
       </div>
    </div>
 
    </div>
</body>
</html>
<script>
function check() {
    var el1404 = document.getElementById("exemple1");
    var str1404 = el1404.options[el1404.selectedIndex].text;
if(str1404 == "RAS-RAS") {
        hide();
    }else {
        show();
    }
 
}
 
function hide(){
    document.getElementById('2').style.visibility='hidden';
    document.getElementById('3').style.visibility='hidden';
    document.getElementById('4').style.visibility='hidden';
    document.getElementById('5').style.visibility='hidden';
    
}
function show(){
    document.getElementById('2').style.visibility='visible';
    document.getElementById('3').style.visibility='visible';
    document.getElementById('4').style.visibility='visible';
    document.getElementById('5').style.visibility='visible';
 
    
}
</script>

Le script marche quand je clique sur RAS-RAS au début, mais si je commence par choisir un élément de "exemple2" au début et qu'après je sélectionne RAS-RAS je vois toujours l'élément qui a été choisi au début en plus du RAS.
Y'a t-il moyen de le faire disparaitre ?
Merci d'avance de votre contribution.

**javatwister** · 05/06/2020, 16h29

Il faut désélectionner les options du 2e select;

**hichamus13** · 05/06/2020, 16h37

Merci pour la réponse.
Comment je fais pour les désélectionner ?

**javatwister** · 05/06/2020, 16h40

Par exemple, enlève l'appel de "onchange" dans ton premier select et transforme ton script comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
document.getElementById("exemple1").addEventListener("change",function(){
	for(let i of document.getElementById("exemple2")){
		if(this.options[this.selectedIndex].text=="RAS-RAS"){
			i.selected=false;
			i.style.visibility='hidden';
		}
		else i.style.visibility='visible';
    }
})

Si tes options ont vraiment besoin d'id, choisis-les de manière correcte, avec une lettre en première position ("ex2", etc.)

**javatwister** · 05/06/2020, 16h43

désolé pour l'indentation qui s'est barrée...

**hichamus13** · 05/06/2020, 16h54

Merci beaucoup.
Ça marche parfaitement.
Très bonne journée

**hichamus13** · 08/06/2020, 15h59

Je reviens vers le sujet.
Le code marche marche bien avec google chrome et opera mais pas avec internet explorer.
Mais j'ai besoin que ce dernier marche avec internet explorer.
Est ce qu'il ya une solution ?
Merci beaucoup

Affichage de certaines données au Clic

JavaScript

Vue hybride

Discussions similaires

Partager

Partager