Concaténation des choix d'une liste déroulante dans un input text

**alaska750** · 23/08/2009, 19h35

Bonjour à tous,
Qui pourrait m'aider a créer un script js me permettant d'effectuer ceci:
J'aimerais construire une interface permettant à un utilisateur de séléctionner des mots dans 2 listes déroulantes et que le résultat s'affiche dans un input text. La difficulté (enfin pour moi qui n'en touche pas une en js) est de concaténer dans l'input type text les différents mots que l'utilisateur auraient sélectionnés:

Exemple: si dans la liste déroulante 1, l'utilisateur choisit "Merci", puis sélectionne dans la liste déroulante 2 "pour ton aide!", le résulat dans l'input type text serait: Merci pour ton aide!. etc ... si l'utilisateur re-sélectionne dans la liste 1 un autre mots, ce dernier doit venir se concaténer à la suite...

Voici le début de code que j'ai sans la partie cruciale de 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
 
<html>
<head>
	<title>HELP HELP !</title>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<select onChange="document.getElementById('text_field').value=this.value;">
    <option value="-1">Choisissez</option>
    <option value="Merci">Merci</option>
    <option value="Vive">Vive</option>
	<option value="Hola">Hola</option>
</select>
<select onChange="document.getElementById('text_field').value=this.value;">
    <option value="-1">Choisissez</option>
    <option value="pour ton aide!">pour ton aide</option>
    <option value="Javascript">Javascript</option>
    <option value="Amigos">Amigos</option>
</select>
<input type="text" id="text_field" name="text_field" value="" />
</body>
</html>

Comme vous pouvez le constater, j'ai encore du pain sur la planche..un grand merci d'avance pour votre aide !

**kernelfailure** · 23/08/2009, 22h11

L'opérateur ce concaténation est '+'
et '+=' te sera aussi utile

Pour accéder à la seule value 'selectionnable' d'une option (barbarisme par opposition au multiselect) :

Code :

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

1
2
 
objetSelect.options[objetSelect.options.selectedIndex].value

objetSelect peut être le mot réservé 'this' (comme dans ton cas) ou tout autre chose, comme par exemple récupérer l'objet par son id.

Amuses toi bien.

**E.Bzz** · 25/08/2009, 12h37

Bonjour,

Envoyé par kernelfailure

L'opérateur ce concaténation est '+'
et '+=' te sera aussi utile

Pour accéder à la seule value 'selectionnable' d'une option (barbarisme par opposition au multiselect) :

Code :

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

1
2
 
objetSelect.options[objetSelect.options.selectedIndex].value

objetSelect peut être le mot réservé 'this' (comme dans ton cas) ou tout autre chose, comme par exemple récupérer l'objet par son id.

objetSelect.value fonctionne très bien aussi

L'objet select récupère la value de l'option sélectionnée ...

A+

**andry.aime** · 25/08/2009, 13h07

Salut,

objetSelect.value fonctionne très bien aussi

Ce n'est pas cross-browser E.Bzz

**Bovino** · 25/08/2009, 13h37

Envoyé par andry.aime

Salut,

Ce n'est pas cross-browser E.Bzz

Si, en tout cas à partir d'IE6

**E.Bzz** · 25/08/2009, 14h19

Envoyé par andry.aime

Ce n'est pas cross-browser E.Bzz

Envoyé par Bovino

Si, en tout cas à partir d'IE6

Ouf !

Mon "expérience" ayant commencé avec IE6 (et mes développements étant principalement orientés vers ce navigateur), j'ignorais cette restriction sur les versions antérieures ...

A+

**kernelfailure** · 25/08/2009, 17h33

Envoyé par E.Bzz

Bonjour,
objetSelect.value fonctionne très bien aussi

L'objet select récupère la value de l'option sélectionnée ...

A+

Et j'ai encore collé ".options" devant selectedIndex

Pour le value du select, il est pas dans mes DTD. Donc, pour le moment, c'est pas dans la norme w3c.
Perso, je ne l'ai jamais rencontré dans du script... Et ne l'utilise pas

HTML 3.2:

Code :

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

1
2
3
4
5
6
<!ELEMENT SELECT - - (OPTION+)>
<!ATTLIST SELECT
        name CDATA #REQUIRED
        size NUMBER #IMPLIED
        multiple (multiple) #IMPLIED
        >

XHTML 1.0 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!ELEMENT select (optgroup|option)+>  <!-- option selector -->
<!ATTLIST select
  %attrs;
  name        CDATA          #IMPLIED
  size        %Number;       #IMPLIED
  multiple    (multiple)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >

C'est sans doute plus mi-cross-soft que cross-browser

**alaska750** · 25/08/2009, 20h51

Merci à vous tous !

**Bovino** · 25/08/2009, 21h17

Envoyé par kernelfailure

Et j'ai encore collé ".options" devant selectedIndex

Pour le value du select, il est pas dans mes DTD. Donc, pour le moment, c'est pas dans la norme w3c.
Perso, je ne l'ai jamais rencontré dans du script... Et ne l'utilise pas

HTML 3.2:

Code :

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

1
2
3
4
5
6
<!ELEMENT SELECT - - (OPTION+)>
<!ATTLIST SELECT
        name CDATA #REQUIRED
        size NUMBER #IMPLIED
        multiple (multiple) #IMPLIED
        >

XHTML 1.0 :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!ELEMENT select (optgroup|option)+>  <!-- option selector -->
<!ATTLIST select
  %attrs;
  name        CDATA          #IMPLIED
  size        %Number;       #IMPLIED
  multiple    (multiple)     #IMPLIED
  disabled    (disabled)     #IMPLIED
  tabindex    %Number;       #IMPLIED
  onfocus     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED
  onchange    %Script;       #IMPLIED
  >

C'est sans doute plus mi-cross-soft que cross-browser

Attention, on ne parle pas d'un attribut HTML value mais de la propriété JavaScript value d'un objet select

Ce n'est pas non plus (à ma connaissance) validé par le W3C, mais en tout cas, c'est reconnu par tous les navigateurs, un peu comme innerHTML, sauf que là c'est IE qui l'a implémenté en dernier [private joke]

Concaténation des choix d'une liste déroulante dans un input text

JavaScript

Vue hybride

Discussions similaires

Partager

Partager