javascript - How to display an image from a dropdown menu selection? -

javascript - How to display an image from a dropdown menu selection? -

here, have next code: class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("select").change(function() { $("select option:selected").each(function() { if ($(this).attr("value") == "oone") { $(".box").hide(); $(".red").show(); } if ($(this).attr("value") == "otwo") { $(".box").hide(); $(".green").show(); } if ($(this).attr("value") == "othree") { $(".box").hide(); $(".blue").show(); } }); }).change(); }); class="snippet-code-css lang-css prettyprint-override"> .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">choose color</option> <option value="oone">option 1</option> <option value="otwo">option 2</option> <option value="othree">option 3</option> </select> </div> <div class="red box">you have selected <strong>red option</strong> here</div> <div class="green box">you have selected <strong>green option</strong> here</div> <div class="blue box">you have selected <strong>blue option</strong> here</div>

(i got external source) happens when selects alternative 1, 2 or 3 create red, greenish or bluish box text in it. wondering how implement images this. when selects alternative 1 image appear , when select alternative 2 (the other image hide) , different image appear.

i have been trying work adding image creating new class under css , when selects alternative 1 create appear however, did not work. - thanks

simply add together images want display within respective <div>:

class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("select").change(function() { $("select option:selected").each(function() { if ($(this).attr("value") == "oone") { $(".box").hide(); $(".red").show(); } if ($(this).attr("value") == "otwo") { $(".box").hide(); $(".green").show(); } if ($(this).attr("value") == "othree") { $(".box").hide(); $(".blue").show(); } }); }).change(); }); class="snippet-code-css lang-css prettyprint-override">.box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .box img { float: right; width: 150px; height: 100px; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">choose color</option> <option value="oone">option 1</option> <option value="otwo">option 2</option> <option value="othree">option 3</option> </select> </div> <div class="red box">you have selected <strong>red option</strong> here <img src="http://i46.tinypic.com/2epim8j.jpg" /> </div> <div class="green box">you have selected <strong>green option</strong> here <img src="http://i49.tinypic.com/28vepvr.jpg" /> </div> <div class="blue box">you have selected <strong>blue option</strong> here <img src="http://i50.tinypic.com/f0ud01.jpg" /> </div>

javascript jquery html css