Conditionner un SELECT a partir de la valeur d'un autre SELECT

**l.laurent60** · 28/02/2023, 14h44

Bonjour,
Je suis un peu perdu en JS, j'ai un form avec cela :

Code html :

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

1
2
3
4
5
6
7
<select name="poste" onchange="SelectPoste(this.value);">
          <option value="0">Choix du poste</o
          <?php foreach($Select_Poste as $key=> $val) {
                         echo '<option value="'.$key.'">'.$val.'</option>';
                    }
           ?>
</select>

Et je voudrais que lorsque la valeur choisie est gela a 8 ou 9

le select suivant voit verrouillé a la valeur 3

Code html :

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

1
2
3
4
5
6
7
8
 <select name="groupe" id="groupe" onchange="updateGroupe(this.value,document.frm.TypeContrat.value,true);">
                        <option value="0">Choix du groupe</option>
                        <?php
                        foreach($Select_Groupes as $key=> $val) {
                            echo '<option value="'.$key.'">'.$val.'</option>\n';
                        }
                        ?>
                    </select>

comment faut il l'écrire ?

Merci par avance pour votre aide les amis

**SpaceFrog** · 28/02/2023, 15h04

https://www.developpez.net/forums/d5...s-liees-entre/

**l.laurent60** · 28/02/2023, 15h17

Merci pour ton retour, mais je n'ai pas trouvé ou compris

**l.laurent60** · 01/03/2023, 14h59

Quand on ne peux rentrée par la porte il faut passer par la fenêtre?
J'ai trouvé une solution, merci pour vos retour.

**ProgElecT** · 01/03/2023, 15h32

Envoyé par l.laurent60

....
J'ai trouvé une solution ...

Cela serait sympathique de partager

.

**l.laurent60** · 02/03/2023, 14h36

L'idée première était de verrouiller un select a une valeur en fonction de la valeur du select plus haut.
Comme je n'ai pas trouvé la solution sur le forum j'ai fait un 2ème select masquer que j'affiche via le selecteur onchange quand la valeur correspond.
Maintenant, c'est pas la meilleur solution...

**NoSmoking** · 02/03/2023, 16h11

Bonjour,

Comme je n'ai pas trouvé la solution sur le forum

« La solution est souvent dans la tête de celui qui cherche. »

Les solutions peuvent être multiples, dont une qui consiste à mettre en disabled le <select> si la valeur n'est pas celle souhaitée.

**l.laurent60** · 03/03/2023, 10h37

Merci beaucoup pour ton retour, j'aimerais bien avancer dans cette idée.
Pour imager l'idée j'aimerais dans l'exemple ci-dessous dire quand dans le select au dessous on choisis un type d'animal l option.value= cat et faire un disable sur dog, hamster via un onchange

Donc comment écrire en JS si la valeur du select est égal xxx alors option cat selected="selected" et toutes les autres options du select disabled="disabled"

Code html :

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

1
2
3
4
5
6
<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>

**laurentSc** · 03/03/2023, 22h03

Envoyé par SpaceFrog

https://www.developpez.net/forums/d5...s-liees-entre/

J'ai regardé le post de ce denisC : il est fort car il s'est inscrit en février 2005 et son post date de 2002...

Pour info, même si rawsrc a quitté DVP en 2020 (je crois), il est toujours actif, incroyablement fort et m'aide beaucoup.

**l.laurent60** · 04/03/2023, 16h59

Merci Laurent pour ce retour si je n'arrive pas a trouver je tenterais de prendre contact
Je pense être proche l'idée est là mais la syntaxe me fait défaut grrrrr :

Code :

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

1
2
       document.getElementById('test').selectedIndex = "all".disabled="disabled" ;
       document.getElementById('test').selectedIndex = "3".selected="selected" ;

Peut être qu'une âme charitable me corrigera...

Merci par avance les amis

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
 
<!-- <script type="text/javascript"> -->
<script>function animal(id=false){
    if(id=="goldfish") {
       document.getElementById('test').selectedIndex = "all".disabled="disabled" ;
       document.getElementById('test').selectedIndex = "3".selected="selected" ;
    }
} 
</script>    
<body>
<form name="frm" method="post" action="#">
    <select name="animal" id="animal" onchange="animal(this.value)">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="goldfish" >Goldfish</option> 
    </select>
 
    <select name="test" id="test">
        <option value="">--Please choose sport</option>
        <option value="1">foot</option>
        <option value="2">tennis</option>
        <option value="3">velo</option>
    </select>	
</form>
</body>
</html>

**laurentSc** · 04/03/2023, 18h02

Étonnant que dans son post de 2002 (https://www.developpez.net/forums/d5...s-liees-entre/) denisC cite un article de rawsrc qui date de 2011...

**l.laurent60** · 04/03/2023, 18h13

Désolé, j'ai beau lire et relire je ne trouve pas la bonne syntaxe

J'ai bien trouvé cela, j'avance

Code :

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

document.getElementById("test").selectedIndex = 3;

ce qui résous partiellement mon problème, maintenant quelle syntaxe pour déactiver les autres options:

Code :

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

document.getElementById("test").option[1] = disabled="disabled";

**ProgElecT** · 04/03/2023, 18h46

Salut

Code javascript :

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

document.getElementById("test").option[1].disabled=true;

**l.laurent60** · 04/03/2023, 19h00

Merci beaucoup pour ton retour c'est très sympa mais l'on peut encore sélectionner la valeur, pourquoi cela ne fonctionne pas ??
En HTML avec l'attribut disabled c'est grisé et bloqué

Code html :

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

<option value="4" disabled="disabled">raquette</option>

**ProgElecT** · 04/03/2023, 19h00

Envoyé par laurentSc

Étonnant que dans son post de 2002 (https://www.developpez.net/forums/d5...s-liees-entre/) denisC cite un article de rawsrc qui date de 2011...

le postage a été modifié le 01/07/2013 à 17h55, ceci explique cela

**l.laurent60** · 04/03/2023, 20h05

voici le message erreur dans la console du navigateur :

Code :

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

document.getElementById("test").option[1].disabled = true;

Uncaught TypeError: can't access property 1, document.getElementById(...).option is undefined

**ProgElecT** · 04/03/2023, 22h43

.options, désolé j'ai oublié le s

Code :

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

document.getElementById("test").options[1].disabled = true;//devient non selectable

Code :

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

document.getElementById("test").options[1].disabled = false;//devient selectable

Pour au plus complet

Code :

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

1
2
3
4
5
6
7
8
9
10
let Liste = document.getElementById("test");
Liste.selectedIndex = 3;
for (let i = 0, iMax  = Liste.options.length; i < iMax; i++) {
  if (i!=Liste.selectedIndex){
    Liste.options[i].disabled = true;//devient non selectable
    }else{
    Liste.options[i].disabled = false;//devient selectable
    //bien que puisque il a été sélectionné, Liste.options[i].disabled est déjà false
   }
}

**l.laurent60** · 05/03/2023, 09h20

Excellent !!!!
Un GRAND merci pour ton aide ProgElecT, j'ai tous les éléments !

**NoSmoking** · 06/03/2023, 07h42

Envoyé par l.laurent60

... j'ai tous les éléments !

sur le coup je ne vois pas l’intérêt d'avoir un <select> pour lequel on ne peut rien sélectionner !

Tu aurais donc également pu faire plus direct en mettant ton <select> en disabled et en lui affectant la directement la value, mais dans ce cas il faut que les value des <select> en liaison aient du sens.

Mais si cela répond à ton besoin c'est l'essentiel

**l.laurent60** · 06/03/2023, 09h24

Si cela a un grand intérêt car c'est pour rendre compatible des choix.

Ton idée est également une autre bonne option

Merci à tous !!!!

Conditionner un SELECT a partir de la valeur d'un autre SELECT

JavaScript

Discussions similaires

Partager

Partager