liste déroulante JS

**drogba72** · 05/02/2009, 10h00

Bonjour,

Voila j'ai un formulaire tout simple que je voudrais compliqué un peu pour le bien de l'application

Donc voici un champ de ce formulaire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$sql = "SELECT DESIGNATION FROM TYPE"; 
$req = odbc_exec($conn,$sql) or die('Erreur SQL : <br />'.$sql); 
 
 
echo "<select name= 'TYPE' >"; 
 
while($data = odbc_fetch_array($req)) 
{ 
echo "\n <option value=\"".$data["DESIGNATION"]."\" selected>".$data["DESIGNATION"]."</option>\n\n"; 
 
} 
echo "<option value='type' selected='selected'>Type</option>"; 
echo '</select>';

Donc il présente une liste déroulante qui affiche :

Arrêt chaine
Trou
Autres
Type (Par défaut)

Déja dans un premier temps bien qu'il soit par défaut j'aimerais que le champ type ne soit pas clicquable alors je sais pas si c'est possible mais bon...

Et deuxièmement j'aimerais que si l'utilisateur clic sur Trou cela grise une partie du formulaire qu'il n'aurait pas besoin de remplir voila

Pouvez vous m'aider svp

Merci d'avance

**le_chomeur** · 05/02/2009, 10h55

Bonjour , merci de poster le code HTML généré

**drogba72** · 05/02/2009, 11h01

Code :

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

1
2
3
4
5
6
7
8
9
10
<select name= 'TYPE' >
 <option value="Arrêt chaîne" selected>Arrêt chaîne</option>
 
 
 <option value="Trou" selected>Trou</option>
 
 
 <option value="Autre" selected>Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

Le voici

**le_chomeur** · 05/02/2009, 11h14

Pour désactiver le champs , il faut utiliser la propriété disabled

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' disabled="disabled">
 <option value="Arrêt chaîne" selected>Arrêt chaîne</option>
 
 
 <option value="Trou" selected>Trou</option>
 
 
 <option value="Autre" selected>Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

Pour grisé une partie de ton formulaire selon ton choix il faut récupérer l'élément qui conditionnera ton choix :
0 pour le premier 1 pour le 2 etc

Code :

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

document.forms[0].monSelect.options[i].selected = true;

et en fonction du choix il te faudra passer sur chacun des éléments que tu souhaitera désactiver

**franculo_caoulene** · 05/02/2009, 11h20

Salut,

En suivant les règles du forum on fait une recherche avant de poster ce qui nous donne comme résultat : activer un input lorsque l'on choisi une option ds un select.

**drogba72** · 05/02/2009, 11h39

Merci pour votre réponse rapide a tout les deux
Désolé pour la recherche ca fait un bout de temps que je cherche sur le net et donc j'ai pas pensé a cherché dans le forum pardon...

Par contre le chomeur

quand je disais que je voulais rendre pas clicable un cahmp parmit le select

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' 
 <option value="Arrêt chaîne" selected>Arrêt chaîne</option>
 
 
 <option value="Trou" selected>Trou</option>
 
 
 <option value="Autre" selected>Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

dans cet exemple ca aurait été de faire en sorte comme la que par défaut ce soit type par contre une fois que la personne a cliqué sur le select il ne puisse plus clicé sur type
c'est ca que je voulais voir si cétait possible

Mais pour ce qui de l'autre partie de ta réponse tu bien compris

Pour grisé une partie de ton formulaire selon ton choix il faut récupérer l'élément qui conditionnera ton choix :
0 pour le premier 1 pour le 2 etc

Code :
document.forms[0].monSelect.options[i].selected = true;et en fonction du choix il te faudra passer sur chacun des éléments que tu souhaitera désactiver

Serait ce possible d'avoir un exemple

en JS je sais juste faire des regex svp

**drogba72** · 05/02/2009, 14h04

Comme je l'ai dit au dessus je ne connais pas beaucoup le JS

On ma conseillé le sujet suivant a juste titre

http://www.developpez.net/forums/d29...ion-ds-select/

Je l'ai fait mais il doit me manquer quelque chose mais je ne sais pas d'ou
Pouvez vous jeter un oeuil svp?

Voici mon select en html

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' >
 <option value="Arrêt chaîne" selected>Arrêt chaîne</option>
 
 
 <option value="Trou" selected>Trou</option>
 
 
 <option value="Autre" selected>Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

Voici La fonction JS

Code :

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
 
<script type="text/javascript">
      function active(obj)
      {
        if (obj.selectedIndex == 'Trou')
        {
          obj.form.HEURE_DEBUT.disabled = '';
          obj.form.HEURE_DEBUT.focus();
 
		  obj.form.HEURE_FIN.disabled = '';
          obj.form.HEURE_FIN.focus();
 
		  obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.DEMANDE.disabled = '';
          obj.form.DEMANDE.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
		  obj.form.IMPUTATION.disabled = '';
          obj.form.IMPUTATION.focus();
 
        }
        if (obj.selectedIndex == 'Autre')
        {
          obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
		  obj.form.IMPUTATION.disabled = '';
          obj.form.IMPUTATION.focus();
        }
      }
    </script>

**le_chomeur** · 05/02/2009, 14h29

Code :

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

<select name="choix" size="1" onchange="active(this)">

**drogba72** · 05/02/2009, 14h34

J'ai mis ca :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' size="1" onchange="active(this)">
 <option value="Arrêt chaîne" selected>Arrêt chaîne</option>
 
 
 <option value="Trou" selected>Trou</option>
 
 
 <option value="Autre" selected>Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

C'est pas bon?

**le_chomeur** · 05/02/2009, 16h21

enlève les selected seul

**drogba72** · 06/02/2009, 08h25

pardon pourrait tu me mettre un code quand ca ne va pas car dire fait ci fait ca c'est pas très clair

**le_chomeur** · 06/02/2009, 08h52

je ne vois pas comment être plus explicite :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' size="1" onchange="active(this)">
 <option value="Arrêt chaîne">Arrêt chaîne</option>
 
 
 <option value="Trou">Trou</option>
 
 
 <option value="Autre">Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

**drogba72** · 06/02/2009, 09h35

Ca ne fonctionne pas non plus

la fonction :

Code :

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
 
<script type="text/javascript">
      function active(obj)
      {
        if (obj.selectedIndex == 'Trou')
        {
          obj.form.HEURE_DEBUT.disabled = '';
          obj.form.HEURE_DEBUT.focus();
 
		  obj.form.HEURE_FIN.disabled = '';
          obj.form.HEURE_FIN.focus();
 
		  obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.DEMANDE.disabled = '';
          obj.form.DEMANDE.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
		  obj.form.IMPUTATION.disabled = '';
          obj.form.IMPUTATION.focus();
 
        }
        if (obj.selectedIndex == 'Autre')
        {
          obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
        }
      }
    </script>

et la liste :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<select name= 'TYPE' size="1" onchange="active(this)">
 <option value="Arrêt chaîne" >Arrêt chaîne</option>
 
 
 <option value="Trou" >Trou</option>
 
 
 <option value="Autre" >Autre</option>
 
<option value='type' selected='selected'>Type</option></select>

**le_chomeur** · 06/02/2009, 09h43

il faut essayer de comprendre un minium :

obj.selectedIndex ne renvois pas la valeur du select renvoyé , mais l'index de l'option choisie exemple , trou est a l'index 1 comme je te l'ai expliqué plus haut , il faut donc adapté ton code en fonction

**drogba72** · 06/02/2009, 10h01

Désolé si ca ne voit pas mais j'essaye de comprendre ...

Dis mois pour résumer la fonction

Code :

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
 
if (obj.selectedIndex == '1')
        {
          obj.form.HEURE_DEBUT.disabled = '';
          obj.form.HEURE_DEBUT.focus();
 
		  obj.form.HEURE_FIN.disabled = '';
          obj.form.HEURE_FIN.focus();
 
		  obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.DEMANDE.disabled = '';
          obj.form.DEMANDE.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
		  obj.form.IMPUTATION.disabled = '';
          obj.form.IMPUTATION.focus();
 
        }
        if (obj.selectedIndex == '2')
        {
          obj.form.CONSTAT.disabled = '';
          obj.form.CONSTAT.focus();
 
		  obj.form.CAUSE.disabled = '';
          obj.form.CAUSE.focus();
 
        }
      }

ca dit bien : si obj.selectedIndex = 2
alors l'utilisateur ne peut pas utilisé CONSTAT et CAUSE
et que normalement ca les grise??

Si c'est ca il y a encore une erreur quelque part et vu mes pauvres connaissances...

**le_chomeur** · 06/02/2009, 10h11

Code :

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
if (obj.selectedIndex == '1')
        {
//réactive les éléments
          obj.form.HEURE_DEBUT.disabled = '';
	  obj.form.HEURE_FIN.disabled = '';
	  obj.form.CONSTAT.disabled = '';
	  obj.form.DEMANDE.disabled = '';
	  obj.form.CAUSE.disabled = '';
	  obj.form.IMPUTATION.disabled = '';
        }
        if (obj.selectedIndex == '2')
        {
//Réactive les éléments
          obj.form.CONSTAT.disabled = '';
	  obj.form.CAUSE.disabled = '';
//dans al logique on doit désactiver les autres
          obj.form.HEURE_DEBUT.disabled = "disabled";
	  obj.form.HEURE_FIN.disabled = "disabled";
...
        }
      }

le focus ne sert a rien dans ce script , il sert a donner le focus a un champs ... mais a chaque fois tu changes de champs après l'avoir activé ...

**drogba72** · 06/02/2009, 10h46

IMPECABLEEEEEEEEEEE!!!!

merci beacoup

Pour mon autre problème je sais pas si tu l'as compris

tu sais celui que quand l'utilisateur arrive sur la page il voit la liste déroulante avec ecrit type par défaut
Mais ce que je voudrais c'est qu'une fois qu'il a cliqué dedans le choix type ne soit plus possible.

Je sais pas si je suis clair...

**le_chomeur** · 06/02/2009, 10h51

dans ce cas tu dois supprimé le type ou le disabled

**drogba72** · 06/02/2009, 10h51

Ok donc ma demande est impossible a réalisé?

**le_chomeur** · 06/02/2009, 10h57

heu si , en fait en le rendant disabled, il ne pourra plus le sélectionné de nouveau ...

dans le onchange , tu vérifis si le selectedindex est égal a celui de type et si oui tu récupères l'option et tu le rend disabled comme les champs de type text :

Code :

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

1
2
 
obj.options[obj.selectedIndex].disabled = "disabled";

liste déroulante JS

JavaScript

Discussions similaires

Partager

Partager