Affichage de certaines données au Clic

Version imprimable

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:

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.

05/06/2020, 16h29
javatwister

Il faut désélectionner les options du 2e select;
05/06/2020, 16h37
hichamus13

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

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

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.)

05/06/2020, 16h43
javatwister

désolé pour l'indentation qui s'est barrée...
05/06/2020, 16h54
hichamus13

Merci beaucoup.
Ça marche parfaitement.
Très bonne journée
08/06/2020, 15h59
hichamus13

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

Transforme le script comme ça:
Code:

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'; } })
:alerte: Ton html est mal formé (des div fermants qui se baladent dans tes select);

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

08/06/2020, 17h23
hichamus13

ç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
08/06/2020, 17h48
javatwister

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"

Bonjour,

Citation:

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:

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:

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.

09/06/2020, 10h39
javatwister

Oui; on peut tout aussi bien mettre le 2e select en visibility:hidden (et basta!);
09/06/2020, 11h17
hichamus13

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é ?
09/06/2020, 12h08
hichamus13
Voilà j'ai pensé à réactiver le select aprés l'envoi du formulaire en utilisant ce code.
Code:

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