Hello is search to change one preview image by select I wrote this but there is a problem ... When I change the selection the image remains the same.
<script type="text/javascript">
function numeroImage() {
var pays = document.getElementById('idSelect').value;
document.getElementById('image').value=pays;
document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";
}
</script>
</head>
<body>
<select id="idSelect" onchange="numeroImage()">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="suisse">Suisse</option>
<option value="allemagne">Allemagne</option>
</select>
<br/>
<br/>
<div id="preview">
<img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
</div>
</body>
Try this Jquery code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="idSelect">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="suisse">Suisse</option>
<option value="allemagne">Allemagne</option>
</select>
<br/>
<br/>
<div id="preview">
<img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
</div>
<script type="text/javascript">
$(document).ready(function($){
$(document).on("change","#idSelect",function(){
var image = $(this).val();
var image_path ="flags/Flag_"+image+".png";
$("#imagePreview").attr("src",image_path);
});
});
</script>
</body>
</html>
Try this javascript code :
<html>
<head>
<script type="text/javascript">
function numeroImage() {
var pays = document.getElementById('idSelect').value;
document.getElementById('imagePreview').src="flags/Flag_"+pays+".png";;
}
</script>
</head>
<body>
<select id="idSelect" onchange="numeroImage()">
<option value="france">France</option>
<option value="belgique">Belgique</option>
<option value="suisse">Suisse</option>
<option value="allemagne">Allemagne</option>
</select>
<br/>
<br/>
<div id="preview">
<img height="75" weidth="100" src="flags/Flag_france.png" id="imagePreview">
</div>
</body>
</html>
you need to delete the row document.getElementById('image').value=pays;