下拉显示图片答案

【问题标题】：Drop down to display image下拉显示图片
【发布时间】：2014-10-17 03:18:38
【问题描述】：

我对代码很陌生，但我想知道我应该如何处理这段代码。我将有一个下拉菜单，您可以在其中选择一种颜色，并且图像将显示在预览框中。我需要在预览框中同时显示每个 color1 color2 和 color3 图像。他们还需要能够在选择其他颜色时进行更改。如果有人能给出一些很棒的方向：）哦，我也有我的图像设置在一个精灵中

这是我目前的代码：

<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #preview {
        display: block;
        width: 270px;
        height: 270px;
        border: 1px solid black;
    }

</style>

<div id="preview">
    <img id="image" src="image.png" />
</div>

<form action="" id="opts">
    <label for="color1">Front Color</label>
    <select name="color1" id="color1">
        <option value="white" selected="">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color2">Middle Color</label>
    <select name="color2" id="color1">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color3">Back Color</label>
    <select name="color3" id="color1">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
</form>

 <script>

        function setcolor1() {
            var img = document.getElementById("image");
            img.src = this.value;
            return false;
        }
        document.getElementById("color1").onchange = setcolor1;
        }

</script>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我建议您编写 JS 或 jQuery（无论您喜欢哪个）来更改背景颜色 onhover 或 onclick，这样您的图像看起来就像用户单击颜色按钮时的不同颜色。按钮改善了 UX（用户体验），感觉比浏览选项列表要好得多。

还有

#preview {
display: block;
width: 270px;
height: 270px;
border: 1px solid black;
}

不适合响应式网页设计/开发

您应该输入以下内容：

html
{
width:100%;
}

#preview
{
width:10.5% (this percentage may change depending on how big you want this to cover your page)
max-width:100%;
}

【讨论】：

【解决方案2】：

我认为使用 jquery 你可以解决这个问题。你已经为所有需要更改的选择框使用了相同的 id。我建议使用类似的代码-

**html**

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<div id="preview">
    <img id="image" src="image.png" />
</div>

<form action="" id="opts">
    <label for="color1">Front Color</label>
    <select name="color1" id="color1">
        <option value="white" selected="">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
    <br>
    <label for="color3">Back Color</label>
    <select name="color3" id="color3">
        <option value="white">white</option>
        <option value="black">black</option>
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="gold">gold</option>
        <option value="pink">pink</option>
        <option value="purple">purple</option>
    </select>
</form>

**css**
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #preview {
        display: block;
        width: 270px;
        height: 270px;
        border: 1px solid black;
    }
#image{
    width:100px;
}

**jquery**

        $(function(){
            $('#color1').change(function()
            {
                var e = document.getElementById("color1");
                var col = e.options[e.selectedIndex].value;
                $('#preview').css('color', col);
               src='a.png';
                $('#preview img').attr("src", src);
        });
            $('#color3').change(function()
            {
                var e = document.getElementById("color3");
                var col = e.options[e.selectedIndex].value;
                $('#preview').css('background-color', col);
        });

      });

jsfiddle link

【讨论】：