Question

一段时间环顾四周，找不到任何适合我需要的东西。我希望能够将T恤的图像更改为不同颜色的图像，具体取决于下拉菜单中选择的颜色。

这是DDL：

<select name="Colours" onchange = "changeImage()">
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>

这是我编写的JS函数（每个选项都重复了switch语句）：

           <script type="text/javascript">
               function changeImage(){
                       var x = document.getElementById("Colours").value;
                       switch(x){
                       case "White":
                                  document.Mainimg.src = images/white.jpg;
                                  location.reload();
                                  break;
                       case "Red":
                                 document.Mainimg.src = images/red.jpg;
                                 location.reload();
                                 break;

最后，如果需要，图片的代码：

                <div id="main_img">
                    <img id="Mainimg" name="Mainpic" src=images/white.jpg>
                </div>

这不起作用，当我在列表中选择一个新选项时没有任何反应。我对如何做到这一点有完全错误的想法，还是只是一个简单的调整？

感谢您的帮助。

Answer 1

删除location.reload()：当您重新加载页面时，您将丢失更改。您更改图像的src这一事实足以让它加载。

使用getElementById获取图片并将网址放在引号之间：

document.getElementById('Mainimg').src = "images/white.jpg";

只需使用显示编译错误的控制台就可以发现丢失的引号。使用the console。

Answer 2

也许您想要做的是：http://jsfiddle.net/jWbUv/

HTML：

<select name="Colours" onchange = "changeImage(this)">
                    <option value="">please select</option>
                    <option value="White">White</option>
                    <option value="Red">Red</option>
                    <option value="Blue">Blue</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Purple">Purple</option>
            </select>
 <div id="main_img">
 </div>

JS：

function changeImage(src) {
    var mainImg = document.getElementById('main_img');
    mainImg.style.setProperty('background-image', 'url(\''+ src.value +'.png\')');
}

CSS：

 #main_img {
        width: 100px;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
    }

JavaScript - 使用DDL更改图像的src

2 个答案: