change image from local server on selecting option from select box

Question

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

score 1 · Accepted Answer · answered Dec 08 '16 at 16:43

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

answered Dec 08 '16 at 16:43

Faouzi Oudouh

800
3
15

thanks for your kind reply... but as I'm selecting the value from select box it's giving me error "Uncaught TypeError: Cannot set property 'src' of undefined(…)". – Nitish Kumar Dec 09 '16 at 08:35
Make sure your select box has the `id="select"` and the `li` that contains your `img` has the `id="myImg"` (case sensitive) – Faouzi Oudouh Dec 09 '16 at 08:47
Thanks it's worked – Nitish Kumar Dec 09 '16 at 08:47

score 0 · Answer 2 · answered Dec 08 '16 at 16:40

<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>

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

change image from local server on selecting option from select box

2 Answers2