<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="form-inline"> <select id="days" class="form-control"> </select> </div> <br /> <div id="display"> </div> </div> </body> </html>
function changeTemplate(){ var days = document.getElementById("days"); if(days.value === ""){ alert("Please select an item first"); }else{ switch(days.value){ case "Monday": document.getElementById("display").innerHTML = '<center><img src="images/monday.jpg" width="600"/></center>'; break; case "Tuesday": document.getElementById("display").innerHTML = '<center><img src="images/tuesday.jpg" width="600"/></center>'; break; case "Wednesday": document.getElementById("display").innerHTML = '<center><img src="images/wednesday.jpg" width="600"/></center>'; break; case "Thursday": document.getElementById("display").innerHTML = '<center><img src="images/thursday.jpg" width="600"/></center>'; break; case "Friday": document.getElementById("display").innerHTML = '<center><img src="images/friday.jpg" width="600"/></center>'; break; case "Saturday": document.getElementById("display").innerHTML = '<center><img src="images/saturday.jpeg" width="600"/></center>'; break; case "Sunday": document.getElementById("display").innerHTML = '<center><img src="images/sunday.jpg" width="600" height="380"/></center>'; break; } } }