Question

如何通过select-option更改图像的src？ img-src是一个php变量，一旦选择了某些内容，我希望它能从另一个div中更改select-option

下拉列表

<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

还有一个香草版...

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以使用Pure JS执行相同的操作，方法是向onchange的{{1}}事件添加事件侦听器。

在这里，我编写了一些用于设置<select>属性的自定义复杂代码。简单来说，您可以使用以下内容将所选选项的src设置为图片的来源：

value

通过select-option

2 个答案: