Question

我有一个选择框，通过从选择框中选择我想要在浏览器上更改图像的选项，但我不想在我的代码上写下所有图像。如果您不理解下面的代码 -

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


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

上面是我的HTML，但我不知道它的java脚本是什么。我只想在每次从选择框中选择选项时，应该更改图像并从本地系统中拾取它并替换旧的图像。可能吗？或者我只是问一个愚蠢的问题？其实我想在我的项目中这个，请有人帮忙。感谢

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

Answer 2

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

从选择框中选择选项时从本地服务器更改图像

2 个答案: