Discussion :

[Toogda]

Bonjour,
j'ai un form select, comme ci-dessous, a laquelle je voudrais associer une image à la sélection :

Code html :

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

1
2
3
4
5
6
7
8
<select name="nom_select">
    <option value="1">30jr</option>
    <option value="2">60jr</option>
    <option value="3">90jr</option>
    <option value="3">180jr</option>
</select>
 
<img src="nom_select.png"> // ceci n'est pas correcte c'est juste pour traduire l'idee et rechercher une solution

[andry.aime]

Bonjour,

Tu changes la valeur de l'attribut src de l'img sur l’événement onchange du select.

Code html :

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

1
2
3
<select name="nom_select" onchange="document.getElementById('id_img').src = 'image_'+this.value+'.png' ">
...
<img src="nom_select.png" id="id_img" />

A+.

[Toogda]

ok merci bien

[Toogda]

oups! j'ai essayer le code précédant mais çà ne marche pas encore quelqu'un pourrait m'indiquer ce qui va pas!

voici mon code

Code :

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

1
2
3
4
5
6
7
 
<select name="nom_select" onchange="document.getElementById('id_img').src = 'img/productImage/'+this.value+'.png' ">
      @foreach ($times as $key => $time)
            <option value="{{$key}}">{{$time}}</option>
      @endforeach
</select> 
<img src="nom_select.png" id="id_img" />

le code reste tel a l’exécution (ctrl+u)

[Invité]

Bonjour,

montre le code HTML généré.

[Toogda]

voici ca:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div >
                                <select name="nom_select" onchange="document.getElementById('id_img').src = 'img/productImage/'+this.value+'.png' ">
                                                                            <option value="0">7_jours</option>
                                                                            <option value="1">10_jours</option>
                                                                            <option value="2">30 jours</option>
                                                                            <option value="3">60 jours</option>
                                                                            <option value="4">90 jours</option>
                                                                            <option value="5">180 jours</option>
 
                                </select> 
 
                                <img src="nom_select.png" id="id_img" />
 
 
                            </div>