liste déroulante JS

Version imprimable

liste déroulante JS

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:

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

05/02/2009, 10h55
le_chomeur

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

Code:

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

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

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:

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

05/02/2009, 11h20
franculo_caoulene

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.

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:

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

Citation:

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

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:

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:

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>

05/02/2009, 14h29
le_chomeur

Code:

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

J'ai mis ca :

Code:

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?

05/02/2009, 16h21
le_chomeur

enlève les selected seul
06/02/2009, 08h25
drogba72

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

je ne vois pas comment être plus explicite :

Code:

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>

Ca ne fonctionne pas non plus

la fonction :

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

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>

06/02/2009, 09h43
le_chomeur

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

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

Dis mois pour résumer la fonction

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

Code:

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

06/02/2009, 10h46
drogba72

IMPECABLEEEEEEEEEEE!!!!

:king:

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...
06/02/2009, 10h51
le_chomeur

dans ce cas tu dois supprimé le type ou le disabled ;)
06/02/2009, 10h51
drogba72

Ok donc ma demande est impossible a réalisé?
06/02/2009, 10h57
le_chomeur
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:

1 2 obj.options[obj.selectedIndex].disabled = "disabled";
:)
06/02/2009, 11h08
drogba72

oulahhhhhhh
je suis chiant mais pas tout compris
06/02/2009, 11h24
drogba72

c'est la que tu me parlait du onchange

Code:

<select name= 'TYPE' size="1" onchange=" active(this) obj.options[obj.selectedIndex].disabled = "disabled";">
06/02/2009, 11h43
le_chomeur

...

je pense qu'il faudrait réviser au moins les bases du javascript ...
car la tu essayes d'avoir une solution toute pondu sans vraiment comprendre

désactivera toute les options sur lesquelles tu cliqueras !

Code:

<select name= 'TYPE' size="1" onchange=" active(this); this.options[this.selectedIndex].disabled = 'disabled';">

il faut donc mettre cette condition dans la fonction active ...
06/02/2009, 11h52
drogba72

Non bah ecoute ca fait rien ca ne marche pas merci beaucoup pour ton aide et ta patience

Excuse moi j'avais prévenu dès le départ que j'avais presque pas de notion en JS

Faut que je m'y mette c'est super pratique mais pas le temps...

MERCIIIIIIIIIIIIIIIIIIIIIIIII