select change value input texte

Version imprimable

02/09/2018, 15h13
imoak

select change value input texte
bonjour

je suis débutant et j'ai pas trouvé comment faire lorsque je select une valeur , j'affecte une autre valeur à input text avec jquery

exemple:
Code:

1 2 3 4 5 6 7 <input type="text" id="demoInput" /> <select id="demoSelect" /> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select>
lorsque je select Option1, le champ "demoInput" value = rouge

lorsque je select Option2, le champ "demoInput" value = vert

ect ....

Merci
02/09/2018, 17h35
Invité
Bonjour,

1- il faut d'abord apprendre le HTML.
Il faut mettre des value aux <option> *:
Code:

1 2 3 4 5 <select id="demoSelect" /> <option value="rouge">Option1</option> <option value="vert">Option2</option> <option value="bleu">Option3</option> </select>
* ce n'est pas obligatoire, mais ça permet de définir des value différentes des textes affichés.
Par exemple : rouge, vert, bleu.

2- il faut apprendre le JavaScript.
Le jQuery permet de simplifier la syntaxe, mais il faut connaitre au moins le fonctionnement de JavaScript.

3- Il faut que tu montres le code que tu as écrit.
On ne va pas écrire tout le code à ta place.

4- Et AVANT TOUT, il faut FAIRE UNE RECHERCHE !
:recherch: "select change value input texte" : la question a déjà été posée 100 fois. Et résolue.

voila le code que je viens de créer

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
<input type="text" id="demoInput" /> 
 
<select id="demoSelect" />
<option></option>
<option value="couleur1">couleur1</option>
<option value="couleur2">couleur2</option>
</select>
 
<script>
$('#demoSelect').change(function(){
        var mavariable = "rouge";
        var mavariable2 = "vert";
        
        
        if($(this).val() == 'couleur1')
        {
    $('#demoInput').val(mavariable);
        
        }
        if($(this).val() == 'couleur2')
        {
    $('#demoInput').val(mavariable2);
        }
        
});
</script>

marche très bien mais y t il une amélioration?

Code:

1
2
3
4
5
6
7
8
<select id="demoSelect" />
  <option></option>
  <option value="rouge">couleur1</option>
  <option value="vert">couleur2</option>
  <option value="bleu">couleur3</option>
</select>
<input type="text" id="demoInput" />
<div id="demoDiv"></div>

Code:

1
2
3
4
$('#demoSelect').on('change',function(){
    $('#demoInput').val( $(this).val() ); // input
    $('#demoDiv').html( $(this).val() ); // div
});

02/09/2018, 19h55
imoak

simple et efficace merci beaucoup

En complément...

Si le texte à afficher dans l'<input> (ou le <div>) est différent de la value du <select>, on peut utiliser des attributs data-* :

Code:

1
2
3
4
5
6
7
8
<select id="demoSelect">
  <option></option>
  <option value="choix1" data-txt="couleur rouge" data-color="red">couleur1</option>
  <option value="choix2" data-txt="couleur verte" data-color="green">couleur2</option>
  <option value="choix3" data-txt="couleur bleue" data-color="blue">couleur3</option>
</select>
<input type="text" id="demoInput" />
<div id="demoDiv"></div>

Code:

1
2
3
4
5
6
7
8
$('#demoSelect').on('change',function(){
    var val = $(this).val();
    var txt = $(this).find('option:selected').data('txt');
    var color = $(this).find('option:selected').data('color');
    $('#demoInput').val( txt ); // input
    $('#demoDiv').html( txt + ' (' + val + ')' ); // div
    $('#demoDiv').css({ 'color':color }); // couleur du texte dans le div
});