How to change image on selection of dropdownlist item
I am making one Html application. I have number of images in my folder.I want to call all that images in my html application and i want to change images on selection of each item, just like as suppose i have dropdown list which contains 4 flower name and also i am using one image tag.I want to 开发者_运维技巧change each image on selection of each flower item how is it possible. Pls help me.Thanks in advance.
In this example, on a selection change event, img#preview
has its src
attribute set to current selection value
.
<select onchange="document.getElementById('preview').src = this.value">
<option selected disabled>Pick a flower...</option>
<option value="https://i.imgur.com/uAhjMNd.jpeg">Flower 1</option>
<option value="https://i.imgur.com/UBvQ5Zq.jpeg">Flower 2</option>
<option value="https://i.imgur.com/b6XaNB3.gif">Flower 3</option>
</select>
<br>
<img id="preview" height="200px">
if you have items with class "myitem" end these items are enumerated by a "id" tag, selected item has an additional class "selected" and your image has class "myImage" you can do this with javascript and jquery:
$('.myitem').each( function () {
if ($(this).hasClass('selected'))
{
$('.myImage').attr('src') = 'path-to-images/image'+$(this).attr('id')+'.jpg';
}
});
精彩评论