Ecrire dans un select

Version imprimable

24/10/2007, 15h38
nandofive

Ecrire dans un select

Bonjour,

Je souhaiterai faire un formulaire avec un select ou on puisse écrire comme on peut trouver dans la barre de google. liste définie ou possibilité de rajouter une option si le choix de l'internaute ne figure pas dans la liste.

Est-ce possible ?

Pour visualiser ce que je demande :

http://img98.imageshack.us/img98/2882/googlexz5.png

Merci d'avance ;)
24/10/2007, 16h19
djoyeux

Pas avec les balise HTML standard.

Peut-être avec du javascript mais la je connais pas trop.

Hello,

Effectivement tu dois passer par du javascript.
Voici un bout de code tout fait.
Je te laisse te débrouiller pour l'adapter :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script language="JavaScript" type="text/javascript"> function add() { document.edi.category.options[document.edi.category.options.length] = new Option(document.edi.newcat.value,document.edi.newcat.value); document.edi.newcat.value = ''; } </script> <select name="category"> <option value="0">---Categorie---</option> </select> <input type="text" size="15" name="newcat"><input type="button" onclick="javascript:add();" value="Ajouter">
Tu verras ce n'est pas très compliqué.
Si tu fais juste un copier coller dans ta page cela devrait fonctionner

@+
cadou

Bonjour,

Citation:

Envoyé par cadoudal56

Effectivement tu dois passer par du javascript.
Voici un bout de code tout fait.
Je te laisse te débrouiller pour l'adapter :

Effectivement, c'est la bonne méthode :D
Quelques petites corrections de syntaxe quand même.
De plus, cadoudal56 a dû oublier que sa liste était dans un form ;)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"> function add() { var objListe = document.getElementById('category'); var valTxt = document.getElementById('newcat').value; objListe.options[objListe.options.length] = new Option(valTxt,valTxt); valTxt = ''; } </script> <select name="category" id="category"> <option value="0">---Categorie---</option> </select> <input type="text" size="15" name="newcat" id="newcat"><input type="button" onclick="add();" value="Ajouter">
A+

24/10/2007, 18h11
Auteur

bonjour,

Je ne sais pas si ça peut répondre à ton problème, mais voici un autre exemple ici :
http://www.developpez.net/forums/sho...42#post2100442

Je ne garantie pas que le code fonctionne sous tous les navigateurs.
25/10/2007, 16h10
nandofive

Tout d'abord merci à vous pour vos réponses.

J'ai opter pour la solution de Auteur :

Comme vous pouvez le voir dans cette page :

http://www.eloquor.fr/mod/ixp_compos...e1/auxerre.php

Cela fonctionne mais j'ai maintenant un autre souci c'est que j'aimerai bien bien attribuer la même liste à plusieurs Input, mais lorsque je clic sur tous les inputs de ma page cela ne modifie que le premier. Je me doute que cela vient des fonctions en javascript mais je n'arrive pas à déterminer ce qu'il faut changer pour que la modification soit effectuer pour chaque input.

Faut-il écrire une fonction différente pour chaque Input ou peut-on attribuer le choix pour chaque Input avec une seule fonction.
25/10/2007, 17h23
younid

Bonjour,

Tu dois donner un identifiant différent pour chacune de tes liste (idListe_1, idListe_2, etc...) et faire appel à tes fonctions en leur transmettant a chaque fois l'id de la liste à gérer

Code:

onClick="gestionListe('idListe_1')"

Si tu as besoin de plus d'aide n'hésite pas a demander.
Bon courage.

la version de cadoudal56 est sans doute plus facile à mettre en place. Voici une variante :

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
61
62
63
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#inputChoix{
 display: none;
 margin: 20px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
function add() 
{
 var objListe = document.getElementById('category');
 var valTxt = document.getElementById('newcat').value;
 var opt = objListe.options[objListe.options.length-1];
 
 objListe.options[objListe.options.length-1] = new Option(valTxt,valTxt, false, false);
 objListe.options[objListe.options.length] = opt;
 document.getElementById('newcat').value = "";
}
 
function clicListe(obj)
{
 var choix = parseInt(obj.options[obj.selectedIndex].value)
 if (choix==-1)
 {
    document.getElementById('inputChoix').style.display = "block";
 }
 else
 {
    document.getElementById('inputChoix').style.display = "none";
 }
 
}
</script>
</head>
 
<body>
 
<form name="" method="post" action="" enctype="">
               <select id="category" onchange="clicListe(this)">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>
               <div id="inputChoix">
                    <input type="text" size="15" id="newcat" />
                    <input type="button" onclick="add();" value="Ajouter" />
               </div>
  </form>
 
</body>
 
</html>

Je viens de trouvez la solution à mon problème à 2h50 du matin :mrgreen: :mrgreen:

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
61
<style type="text/css">
<!--
#inputChoix{
 display: none;
 margin: 20px;
}
 
//-->
</style>
 
 
<script type="text/javascript">
function add() 
{
 var objListe = document.getElementById($name);
 var valTxt = document.getElementById('newcat').value;
 var opt = objListe.options[objListe.options.length-1];
 
 objListe.options[objListe.options.length-1] = new Option(valTxt,valTxt, false, false);
 objListe.options[objListe.options.length] = opt;
 document.getElementById('newcat').value = "";
}
 
function clicListe(obj)
{
 var choix = parseInt(obj.options[obj.selectedIndex].value)
 if (choix==-1)
 {
    document.getElementById('inputChoix').style.display = "block";
 }
 else
 {
    document.getElementById('inputChoix').style.display = "none";
 }
 
}
</script>
 
<form name="formfocus" method="post" action="" enctype="">
               <select name="category1" id="category1" onChange="clicListe(this), $name=this.id">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>            
               <select name="category2" id="category2" onChange="clicListe(this), $name=this.id">
                       <option selected="selected" value="0">-- Faites votre choix --</option>
                       <option value="1">choix 1</option>
                       <option value="2">choix 2</option>
                       <option value="3">choix 3</option>
                       <option value="4">choix 4</option>
                       <option value="-1">autre choix >></option>
               </select>             
  </form>
 
                 <div id="inputChoix">
                    <input type="text" size="15" id="newcat" />
                    <input type="button" onClick="add();" value="Ajouter" />
               </div>

Vous pouvez testez ici http://www.eloquor.fr/script.php

19/11/2007, 15h41
nandofive

Mon code fonctionne sur Firefox mais ne fonctionne pas sur IE. Il me dit que $name n'est pas défini. Quel est la différence entre firefox et IE ?

Merci d'avance.