JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<select id="select">
    <option disabled selected value> -- select an option -- </option>
<option value="angers">Angers</option>
<option value="chateauroux">Châteauroux</option>
</select>
<div id="nom"></div>
<div id="photourl"></div>
<img id="photo" src="" alt="">

JavaScript

var ville = {
    angers : {
        nom : "Angers",
        imgurl : "./img/angers.png"
    },
    chateauroux : {
        nom : "Châteauroux",
        imgurl : "./img/chateauroux.png"
    }
}


var select = document.getElementById('select');
var nom = document.getElementById('nom');
var photourl = document.getElementById('photourl');

select.addEventListener("change", function() {
    var valeur = this.value;
    nom.innerHTML = ville[valeur].nom;
    photourl.innerHTML = ville[valeur].imgurl;
    document.getElementById("photo").src = ville[valeur].imgurl;
});