Concatener les value de 2 selects

Version imprimable

Bonjour,

Après avoir été aidé par simone pour afficher en temps réel la value d'un select ICI J'aimerai pouvoir concaténer 2 value de 2 select different, et cela toujours en temps réel (la value du 1er select toujours avant la value du 2ème select).

J'ai donc plusieurs <select> et j'aimerai les mettre à jour dans le <input type="text" ou une autre fonction d'affichage.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <FORM name="formselect"> <SELECT name="liste" size=1 onchange="document.getElementById('valueSelect').value=this.options[this.selectedIndex].value"> <OPTION value="valeur ligne 1">Libellé ligne 1</OPTION> <OPTION value="valeur ligne 2">Libellé ligne 2</OPTION> </SELECT> <SELECT name="liste2" size=1 onchange="document.getElementById('valueSelect2').value=this.options[this.selectedIndex].value"> <OPTION value="valeur ligne 3">Libellé ligne 1</OPTION> <OPTION value="valeur ligne 4">Libellé ligne 2</OPTION> </SELECT> <input type="text" id="valueSelect" /> </FORM>
Est-ce possible de mettre à jour les 2 valeurs des selects dans le 'text' ? Pour donner le resultat suivant:
valeur ligne 1-valeur ligne 3
ou valeur ligne 2-valeur ligne 3, ou encore valeur ligne 1-valeur ligne 4,...

Merci d'avance

cordialement

23/02/2006, 09h20
javatwister

réussis-tu déjà à afficher une valeur de select dans le champ "text"?

Code:

1
2
3
4
5
6
 
function peupleInput() {
  document.getElementById('valueSelect').value=document.getElementById('liste1').options[document.getElementById('liste1').selectedIndex].value +
    "-" +
    document.getElementById('liste2').options[document.getElementById('liste2').selectedIndex].value
}

C'est illisible, mais ça devrait marcher (si tu rajoutes les bons ids à tes select et que tu lies le onchange à cette fonction).

dans le principe, tu peux faire ça (juste à décider comment tu gères les valeurs par défaut pour les 2 variables);

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
<script type="text/javascript"> 
 
var s, s2;
 
function somme(){
	document.getElementById("t").value= s + " - " + s2;
}
 
</script> 
 
<form id="f">
 
<select onchange="s=this.value;somme()">
<option value="truc">option 1</option>
<option value="truc2">option 2</option>
<option value="truc3">option 3</option>
</select>
 
<select onchange="s2=this.value;somme()">
<option value="truc">option 1</option>
<option value="truc2">option 2</option>
<option value="truc3">option 3</option>
</select>
 
<p>
<input type="text" name="t" id="t" />
</p>
 
</form>

23/02/2006, 10h26
Scratchy

La première solution de denisC m'a paru très compliquées pour un débutant comme moi, je l'ai essayer mais sans reussir à vraiment l'implémenter.

Par contre la solution de javatwister a été parfaite et j'ai pu l'adapter à mon code sans problème.

J'ai quand même un petit probleme qui persiste, c'est que le champ input n'es pas mis à jour des le chargement de la page, est-ce possible ?

Sinon je premier problème est résolu :)

Merci à tous

Cordialement