comment changer l'image en utilisant la liste déroulante?

Question

Je veux utiliser une liste déroulante, chaque fois que je clique sur le contenu, différentes images apparaîtront. Mais je ne veux pas utiliser la propriété 'value', parce que je veux utiliser les valeurs pour d'autres utilisations.

Exemple:

<select name='test'> 
<option value='1'>1</option> 
<option value='2'>2</option> 
<option value='3'>3</option> 
<option value='4'>4</option> 
</select> 

Comment puis-je accomplir cela?

Merci.

Edit:

avec la suggestion de Pointy, cela fonctionne.

<select name="dpt" onChange="picture.src=this.options[this.selectedIndex].getAttribute('data-whichPicture');" > 
<option value="1839" data-whichPicture='./imgs/t1.jpg' >01</option> 
<option value="1661" data-whichPicture='./imgs/t2.png' >02</option> 
</select> 
</select> 
<img src='' id='picture' /> 

Edit:

Il y a un problème, qui est si j'actualisez la page, la valeur par défaut l'image affiche mais la sélection dans la liste déroulante reste. Comment réparer ça?

Answer 1

Vous pouvez utiliser la "classe" de chaque option pour contenir un indicateur de l'image à afficher. Si vous écrivez en HTML5 comme tous les gens de nos jours magnifiques, vous pouvez utiliser un « données » attribut:

<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option> 

Vous pouvez en fait tenir tout attribut que vous voulez sur vos balises, mais il va quitter la page dans un état non valide. Les attributs HTML5 ne sont pas encore validés (je ne pense pas, le validateur HTML5 que j'ai essayé la dernière fois était assez douteux), mais le W3C promet qu'ils seront un jour.

modifier — aussi - votre question mentionne que vous voulez changer les images quand quelqu'un « clique » sur le <select>. Vous pouvez en fait obtenir des événements "click" de chaque <option>, mais vous devriez probablement aussi surveiller les événements "change". Les utilisateurs peuvent tabuler dans votre <select> et utiliser les touches fléchées haut et bas pour changer la sélection. Vous n'obtiendrez pas l'événement "change" tant que l'utilisateur n'aura pas cliqué sur <select> ou cliqué ailleurs. (Il pourrait être possible d'obtenir « keyPress » les événements, je ne l'ai pas essayé mais je pourrais ...)

modifier — Pour obtenir les attributs (si vous utilisez le truc « Data- »), vous devez utiliser la méthode « getAttribute » sur les éléments:

var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture'); 

Answer 2

vous pouvez configurer une carte entre les valeurs des options et les images

{ 1: "imgA.png", 2: "imgB.png" } 

puis utiliser une fonction pour charger l'image correcte basé sur cette cartographie.

Une autre approche pourrait consister à augmenter la valeur avec le nom de l'image, comme celui-ci,

<select name='test'> 
<option value='1;imgA.png'>1</option> 
<option value='2;imgB.png'>2</option> 
</select> 

Et puis utilisez les fonctions de chaîne pour analyser la valeur numéro ou le nom de l'image, au besoin.

Answer 3

Vous pouvez placer plusieurs valeurs dans le champ 'valeur' ​​en les séparant avec des délimiteurs. Vous devez diviser la valeur et sélectionnez celui que vous souhaitez utiliser lors de l'affichage de votre image

<option value="1,dogs.jpg">1</option> 
<option value="2,hogs.jpg">2</option> 
<option value="3,cats.jpg">3</option> 
<option value="4,dogs.jpg">4</option>