Question

I need to embed some javascript within a website, and what I want it to do is the following:

I want to have a set of hidden images within the website and depending on the input from user (into a query box) a certain image specified to a certain input value should appear therefore stop being invisible.

In my case I am making a timetable and I have set of 5 images, when user imputs for example “monday” the image that is set to this value (monday timetable) should appear. Please help me writing this javascript for the html document.

Answer 1

You could use data attributes to link particular elements (images) to corresponding options.

<select id="dow">
    <option>-- PLEASE SELECT --</option>
    <option data-target='div1'>Monday</option>
    <option data-target='div2'>Tuesday</option>
</select>
<div id="images">
    <div id="div1" class="hidden">Image for Monday</div>
    <div id="div2" class="hidden">Image for Tuesday</div>
</div>

You can show appropriate image using this script:

​$('#dow').change(function() {
    var id = $(this).find(':selected').data('target');
    $('#images > div').hide();
    $('#' + id).show();
});​​​​

See this DEMO.