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

**javatwister** · 08/06/2020, 17h17

Transforme le script comme ça:

Code javascript :

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

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

Ton html est mal formé (des div fermants qui se baladent dans tes select);

N'écris aucun code après la fermeture de </body>

**hichamus13** · 08/06/2020, 17h23

ça ne marche pas non plus, mais d'aprés ce que j'ai vu sur internet le addEventListener n'est pas suporté par internet explorer.
Merci pour la réponse

**javatwister** · 08/06/2020, 17h48

Eh bien si: ça marche avec Explorer (sauf si tu as une version pas mise à jour depuis des siècles), sinon je ne te l'aurais pas proposé. Tu as juste à insérer le script en fin de "body"

**NoSmoking** · 09/06/2020, 09h48

Bonjour,

Envoyé par hichamus13

Je veux, en cliquant sur RAS-RAS dans exemple1, je n'ai plus de choix dans exemple2 à part RAS.

cela revient a mettre en disabled le <select>, alors pourquoi ne pas le faire ?

Sur base du code HTML suivant :

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
<div>
  <label for="sel-1">Select #1</label>
  <select id="sel-1" name="test">
    <option value="">Choix test</option>
    <option value="1">test 1</option>
    <option value="2">test 2</option>
    <option value="3">test 3</option>
    <option value="4">test 4</option>
  </select>
</div>
<div>
  <label for="sel-2">Select #2</label>
  <select id="sel-2" name="option" disabled>
    <option value="">Choix option</option>
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
  </select>
</div>

j'aurais eu cette approche :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const sel1 = document.getElementById("sel-1");
const sel2 = document.getElementById("sel-2");
sel1.addEventListener("change", function () {
  if (this.selectedIndex === 0) {
    // désactive le select
    sel2.setAttribute("disabled", "disabled");
    // place la sélection sur la 1st ligne
    sel2.selectedIndex = 0;
  }
  else {
    // réactive le select
    sel2.removeAttribute("disabled");
  }
});

sans avoir à gérer les <option> séparément.

**javatwister** · 09/06/2020, 10h39

Oui; on peut tout aussi bien mettre le 2e select en visibility:hidden (et basta!);

**hichamus13** · 09/06/2020, 11h17

Merci pour vos réponses.
@NoSmoking, ta solution marche bien sauf que à l'envoi de la requête ça me dit que la valeur dans le deuxième select est nulle quand le select est désactivé.
Y a t-il moyen d'attribuer une valeur au select quand il est désactivé ?

**hichamus13** · 09/06/2020, 12h08

Voilà j'ai pensé à réactiver le select aprés l'envoi du formulaire en utilisant ce code.

Code :

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

1
2
3
4
5
Query(function ($) {        
  $('form').bind('submit', function () {
    $(this).find(':input').prop('disabled', false);
  });
});

Merci beaucoup de votre aide.

Affichage de certaines données au Clic

JavaScript

Discussions similaires

Partager

Partager