开发者

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';
  }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜