Javascript 如何从下拉菜单选择中显示图像？

在这里，我有以下代码：

$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（“选择选项：选定”）。每个（函数（）{
如果（$（this.attr（“value”）=“Oone”）{
$（“.box”）.hide（）；
$（“.red”）.show（）；
}
如果（$（this.attr（“值”）=“Otwo”）{
$（“.box”）.hide（）；
$（“.green”）.show（）；
}
if（$（this.attr（“value”）==“Othree”）{
$（“.box”）.hide（）；
$（“.blue”）.show（）；
}
});
}).change（）；
});
.box{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
瑞德先生{
背景：#ff0000；
}
格林先生{
背景：#00ff00；
}
蓝先生{
背景：#0000ff；
}

选择颜色
选择1
选择2
选择3
您选择了红色选项，所以我在这里
您选择了绿色选项，所以我在这里
您选择了蓝色选项，因此我在这里
只需将您想要显示的图像添加到相应的
中：


$（文档）.ready（函数（）{
$（“选择”）.change（函数（）{
$（“选择选项：选定”）。每个（函数（）{
如果（$（this.attr（“value”）=“Oone”）{
$（“.box”）.hide（）；
$（“.red”）.show（）；
}
如果（$（this.attr（“值”）=“Otwo”）{
$（“.box”）.hide（）；
$（“.green”）.show（）；
}
if（$（this.attr（“value”）==“Othree”）{
$（“.box”）.hide（）；
$（“.blue”）.show（）；
}
});
}).change（）；
});
.box{
填充：20px；
显示：无；
边缘顶部：20px；
边框：1px实心#000；
}
.box img{
浮动：对；
宽度：150px；
高度：100px；
}
瑞德先生{
背景：#ff0000；
}
格林先生{
背景：#00ff00；
}
蓝先生{
背景：#0000ff；
}

选择颜色
选择1
选择2
选择3
您选择了红色选项，所以我在这里
您选择了绿色选项，所以我在这里
您选择了蓝色选项，所以我在这里
根据您可以显示的类的选择，在不同的类中有不同的图像

.red {
  background-image:"img1.png";
}
.green {
  background-image:"img2.png";
}
.blue {
  background-image:"img3.png";
}

现在脚本将如您所期望的那样

 $("select").change(function() {
    $("select option:selected").each(function() {
      if ($(this).attr("value") == "Oone") {
        $(".box").hide();
        $(".red").show();
      }
      if ($(this).attr("value") == "Otwo") {
        $(".box").hide();
        $(".green").show();
      }
      if ($(this).attr("value") == "Othree") {
        $(".box").hide();
        $(".blue").show();
      }
    });

您可以使用
img
元素以正常方式将图像放入框中。只要
.box
处于隐藏状态，它们就会被隐藏。如果将
选项
的
值
属性更改为
框
的相应css类，您还可以稍微简化js代码：

<div>
  <select>
    <option style="display: none;">Choose Color</option>
    <option value="red">Option 1</option>
    <option value="green">Option 2</option>
    <option value="blue">Option 3</option>
  </select>
</div>
<div class="red box">
    You have selected <strong>red option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>
<div class="green box">
    You have selected <strong>green option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>
<div class="blue box">
    You have selected <strong>blue option</strong> so i am here
    <img src="http://placehold.it/150x150" />
</div>

这是一个。
在你的
框中放入一个图像
s<代码>
啊，对了。但我希望每个选项都有不同的图片？你的意思是我可以把我的图像放在
边框下：1px solid#000
？你可以用背景图像作为方框。啊，好的。我可以创建一个新的
$（“.pic”）.show（）吗.pic
的新类？或者我只是把它包含在
.box
？啊，对了，所以它相当简单。因此，如果我想添加更多内容，如文本和其他图像，我可以将其添加到div中谢谢，好的。所以我可以把它放在
或者我可以把它放在HTML的这一部分？（它们是一样的吗）？我给你的是CSS解决方案@TJ给出了HTML解决方案。
$("select").change(function() {
  $('.box').hide();
  $('.' + $(':selected', this).attr('value')).show();
});