通过选择选项更新图像的src

如何通过选择选项更改图像的src？在IMG-SRC是一个PHP变量，一旦选择的东西，我想它从另一个DIV通过选择选项更新图像的src

下拉

<select> 
<option value="<?php echo $aColorName; ?>">Color Name</option> 
<option value="<?php echo $anotherColorName; ?>">Color Name</option> 
</select> 

<img src="<?php echo $colorUrl.$aColorName ?>" />

我想要的图像源更新每次更改选择选项从选项中选择新颜色

来源

2016-11-24 atp

添加src作为选项的值，并把onchange = function（）{document.querySelector（'img'）。src = this.value} – Lain

@Lain介意阐述？有点新，thanx – atp

为什么我们总是抱怨，当人们做出应该是评论的答案时，但我们从来没有说过应该回答的评论？ – Phiter

和香草版...

var selectBox = document.getElementById('selectBox'); 
 
    var theImg = document.getElementById('theImg'); 
 
    
 
    selectBox.addEventListener('change', function() { 
 
     theImg.src = '/images/' + this.options[this.selectedIndex].value + '.jpg'; 
 
    }, false);

<select id="selectBox"> 
 
    <option value="blue">Blue</option> 
 
    <option value="red">Red</option> 
 
</select> 
 

 
<img id="theImg" src="/images/<?php echo $colorUrl.$aColorName ?>.jpg" /> 
 

 
<!-- 
 
The 'src' attribute in image below needs to point to the default image to fix your problem. So for example if your images path is: '/images/' and in your foreach loop the value of $colorUrl.$aColorName is: 'Yellow' then the above code will output thew following when the page initially loads: 
 

 
<img id="theImg" src="/images/Yellow.jpg" /> 
 
-->

来源

2016-11-24 15:48:12 Zinc

正是我在找的东西，谢谢.. btw默认和选定的选项后，页面加载丢失，它不会更新它 – atp

没问题 - 你的意思是，当页面第一次加载图像被破坏？如果是的话，那么有很多方法可以解决这个问题，但只需设置图像的初始值src - – Zinc

我试过这样做，它不会改变初始值 – atp

由于您已添加jQuery，因此我会使用事件处理程序向您展示不显眼代码的示例。

$(function() { 
 
    $("select").change(function() { 
 
    $("img").attr("src", "//placehold.it/250/" + this.value + "?text=" + $(this).find("option:selected").text()); 
 
    }); 
 
});

img {display: block; margin: 15px 0;}

<script src="https://code.jquery.com/jquery-2.2.4.js"></script> 
 
<select> 
 
    <option value=""></option> 
 
    <option value="0f0">Yellow</option> 
 
    <option value="00f">Blue</option> 
 
</select> 
 

 
<img src="//placehold.it/250?text=Select Colour" alt="" />

您也可以使用纯JS，通过添加事件监听器onchange事件<select>的做同样的事情。

在这里，我写了一些自定义复杂的代码来设置src属性。在简单的方法，你可以使用下面的设置所选择的选项作为图像的源value：

$("img").attr("src", this.value);

来源

2016-11-24 15:42:39

而不是placeholder.it，我可以将它更改为PHP变量吗？ – atp

@atp这就是我所说的。你可以从字面上有任何东西... –

我也试过这个，它的工作，但我遇到了问题，我有多个引导模式，每个模态喂你的代码一个src，它显示它，但问题是，当我关闭一个模式并打开另一个，我找到以前的图像..它不重置 – atp

通过选择选项更新图像的src

回答

相关问题