Question

在这里，我有以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我一直试图通过在css下创建一个新类来添加图像来使其工作，当有人选择选项1时，它会使它显示，但是不起作用。 - 谢谢

Answer 1

只需在相应的<div>：

中添加要显示的图像

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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被隐藏，它们就会被隐藏。如果您将value的{{1}}属性更改为options的相应css类，也可以稍微简化您的js代码：

.box

这是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>

这是jsfiddle。

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

3 个答案: