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

Question

在这里，我有以下代码：

 $(document).ready(function() { $("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(); } }); }).change(); }); 

  .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">Choose Color</option> <option value="Oone">Option 1</option> <option value="Otwo">Option 2</option> <option value="Othree">Option 3</option> </select> </div> <div class="red box">You have selected <strong>red option</strong> so i am here</div> <div class="green box">You have selected <strong>green option</strong> so i am here</div> <div class="blue box">You have selected <strong>blue option</strong> so i am here</div> 

（我是从外部来源获得的），但是发生的事情是当有人选择选项1、2或3时，它将创建一个红色，绿色或蓝色的框，其中包含一些文本。 我想知道如何在其中实现图像。 因此，当某人选择选项1时，将出现一个图像，而当他们选择选项2时（另一幅图像将隐藏），将出现另一幅图像。

我一直在尝试通过在css下创建一个新类来添加图像来使其工作，并且当有人选择选项1时，它会使其出现，但这是行不通的。 - 谢谢

Answer 1

只需将要显示的图像添加到各个<div> ：

 $(document).ready(function() { $("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(); } }); }).change(); }); 

 .box { padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .box img { float: right; width: 150px; height: 100px; } .red { background: #ff0000; } .green { background: #00ff00; } .blue { background: #0000ff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> <select> <option style="display: none;">Choose Color</option> <option value="Oone">Option 1</option> <option value="Otwo">Option 2</option> <option value="Othree">Option 3</option> </select> </div> <div class="red box">You have selected <strong>red option</strong> so i am here <img src="http://i46.tinypic.com/2epim8j.jpg" /> </div> <div class="green box">You have selected <strong>green option</strong> so i am here <img src="http://i49.tinypic.com/28vepvr.jpg" /> </div> <div class="blue box">You have selected <strong>blue option</strong> so i am here <img src="http://i50.tinypic.com/f0ud01.jpg" /> </div> 

Answer 2

在不同的班级中只有不同的图像，根据选择可以显示班级。

.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();
      }
    });

Answer 3

您可以使用img元素以常规方式将图像放入盒子中。 只要.box隐藏，它们就会被隐藏。 如果将options的value属性更改为.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>

这是js：

$("select").change(function() {
  $('.box').hide();
  $('.' + $(':selected', this).attr('value')).show();
});

这是一个jsfiddle 。