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

Version imprimable

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

Code:

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:

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

28/02/2023, 15h04
SpaceFrog

https://www.developpez.net/forums/d5...s-liees-entre/
28/02/2023, 15h17
l.laurent60

Merci pour ton retour, mais je n'ai pas trouvé ou compris
01/03/2023, 14h59
l.laurent60

Résolu

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.
01/03/2023, 15h32
ProgElecT

Citation:

Envoyé par l.laurent60

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

Cela serait sympathique de partager :aie:.
02/03/2023, 14h36
l.laurent60

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...
02/03/2023, 16h11
NoSmoking

Bonjour,

Citation:

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.

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:

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>

03/03/2023, 22h03
laurentSc

Citation:

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.

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:

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:

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>

04/03/2023, 18h02
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...
04/03/2023, 18h13
l.laurent60

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

J'ai bien trouvé cela, j'avance

Code:

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

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

Code:

document.getElementById("test").option[1] = disabled="disabled";
04/03/2023, 18h46
ProgElecT

Salut

Code:

document.getElementById("test").option[1].disabled=true;
04/03/2023, 19h00
l.laurent60

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:

<option value="4" disabled="disabled">raquette</option>
04/03/2023, 19h00
ProgElecT

Citation:

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
04/03/2023, 20h05
l.laurent60

voici le message erreur dans la console du navigateur :

Code:

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

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

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

Code:

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

Code:

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

Pour au plus complet
Code:

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 } }

05/03/2023, 09h20
l.laurent60

Excellent !!!!
Un GRAND merci pour ton aide ProgElecT, j'ai tous les éléments !
06/03/2023, 07h42
NoSmoking

Citation:

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 ;)
06/03/2023, 09h24
l.laurent60

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 !!!!