0

I have a select box and by selecting options from the select box I want to change image on my browser, but I don't want to write all the images on my code. If you don't understand the see below code-

<select>
       <option>1</option>
       <option>2</option>
       <option>3</option>
</select>


<ul>
   <li id="myImg">    
       <img src="images/1.jpg">
   </li>
</ul>

Above is my html but i don't know what would be it's java script. I just want whenever I select option from select box, the image should be changed and it's would be picked up from my local system and replace the old one. Is it possible? or I'm just asking a stupid question? Actually I want this in my project, please someone help. Thanks

Nitish Kumar
  • 80
  • 1
  • 2
  • 8

2 Answers2

1

HTML:

<select id="select">
   <option>1</option>
   <option>2</option>
   <option>3</option>
</select>

Javascript:

document.getElementById('select').onchange = function(){
  document.querySelectorAll('#myImg img')[0].src = '/images/' + this.value + '.jpg';
};
Faouzi Oudouh
  • 800
  • 3
  • 15
0
<select name="select_image" id="select_image" onchange="setImage(this);">
    <option value="https://www.google.ru/images/srpr/logo4w.png">Google</option>
    <option value="http://yandex.st/www/1.645/yaru/i/logo.png">Yandex</option>
    <option   alue="http://limg.imgsmail.ru/s/images/logo/logo.v2.png">Mail</option>
</select>
<img src="https://www.google.ru/images/srpr/logo4w.png" name="image-swap" />

<script> 
    function setImage(select){
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
    }
</script>
Arun
  • 1,609
  • 1
  • 15
  • 18
  • Thanks for your kind reply, But what would happen if I need to change a lot of or more than 40 images. I would need to pass the images that would increase my code and I don't want that. All I want is just to pick images from local or server when I select value from select box and I just have to give only one "src" path and all the images would be on server or local. – Nitish Kumar Dec 09 '16 at 08:39