通過選擇選項更新圖像的src

Question

如何通過選擇選項更改圖像的src？在IMG-SRC是一個PHP變量，一旦選擇的東西，我想它從另一個DIV

下拉

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

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

我想要的圖像源更新每次更改選擇選項從選項中選擇新顏色

Answer 1

和香草版...

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

Answer 2

由於您已添加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);