JSFiddle - React, Tailwind, and code Playground
HTML
<select id="animal" onchange="changeImage(this)"></select>
<br>
<img src="" id="animal_img"/>
<div id="animal_num"></div>
JavaScript
valueToImage = {
Kangaroo : "http://www.freephotobank.org/d/19544-2/Kangaroo-009.jpg",
Canard : "http://www.freephotobank.org/d/150-4/bird1.jpg",
Chat : "http://www.freephotobank.org/d/1178-4/cat2.jpg"
};
function chargerEntree()
{
var entree = document.getElementById("animal");
entree.options[0]=new Option("choisir",00);
entree.options[1]=new Option("Kangaroo", 1);
entree.options[2]=new Option("Canard", 2);
entree.options[3]=new Option("Chat", 3);
}
function changeImage(select) {
var valeur = select.options[select.selectedIndex].text;
var num = select.options[select.selectedIndex].value;
document.getElementById("animal_img").src = valueToImage[valeur];
document.getElementById("animal_num").innerHTML = "numéro : " + num;
}
chargerEntree();