单击 select 按钮上的选项时如何显示图像？

Question

我刚开始参加 Freecodecamp 课程，我一直在做调查表。我想让 Select 按钮在用户选择主题时显示图像。

我认为我在 CSS HTML 方面的新手知识无法做到这一点。如果可以使用这些语言来完成，我希望 Javascript 或 Jquery 知识渊博的人可以帮助我解决这个问题。

我在我的 codepen 上发布了这个：https://codepen.io/remevan/pen/poogBeK

<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>

Answer 1

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#000000";
 }
};
</script>

试试这个

<body>
<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="myFunction(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
      <div id = "sampleImg"></div>
</div>
</div>
</div>
</body>
<script>
function myFunction(itm){
 if (itm == "MarvelUniverse"){
      document.body.style.backgroundImage = "url('pathto-MarvelUniverse.jpg')";
 } else  if (itm == "masqueradeBall"){
      document.body.style.backgroundImage = "url('pathto-masqueradeBall.jpg')";
 } else  if (itm == "PinoyAko"){
      document.body.style.backgroundImage = "url('pathto-PinoyAko.jpg')";
 } else  if (itm == "70sShow"){
      document.body.style.backgroundImage = "url('pathto-70sShow.jpg')";
 } else  if (itm == "CandyFactory"){
      document.body.style.backgroundImage = "url('pathto-CandyFactory.jpg')";
 } else {
   document.body.style.backgroundColor = "#eeeeee";
 }
};
</script>

Answer 2

所以我为你的图片添加了一个占位符。之后，我编写了一个函数，在更改下拉菜单时显示图像。如果您想要每个主题的特定图像，那么您需要扩展此功能。此时我只在 masqueradeBall 上显示图像。

function showImage(image) {
  var a = document.getElementById('img');

  if(image == "") {
  a.src ="";
  } else if (image == "masqueradeBall") {
    a.src = "https://www.w3schools.com/tags/smiley.gif";
  }
}

<div id="themeField">
  <div id=leftField>
    <div id="containerA">
      <p> Let us know what is your preferred
        <select id="dropdown" onchange="showImage(this.value)">
      </p>
      <option disabled value selected>THEME</option>
      <option value="MarvelUniverse">Marvel Universe</option>
      <option value="masqueradeBall">Masquerade Ball</option>
      <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option>
      <option value="CandyFactory">Candy Factory</option>
      </select>
    <br/>
          <img id="img"></p>

Answer 3

 <script>
    var myMap= new Map();
    myMap.set("MarvelUniverse","https://www.w3schools.com/tags/smiley.gif")
    myMap.set("masqueradeBall","https://www.w3schools.com/tags/dog.gif")
    myMap.set("PinoyAko","https://www.w3schools.com/tags/smiley.gif")
    myMap.set("70sShow","https://www.w3schools.com/tags/car.gif")
    myMap.set("CandyFactory","https://www.w3schools.com/tags/cat.gif")
        function showImage(value) {
          var a = document.getElementById('dropdown').value;
    alert(a)
    img.src=myMap.get(a);
    document.getElementById("img").innerHTML=img.src
        }
      </script>
 <select id="dropdown" onchange="showImage(this.value)">
               <option disabled value selected>THEME</option>
              <option value="MarvelUniverse">Marvel Universe</option>
              <option value="masqueradeBall">Masquerade Ball</option>
              <option value="PinoyAko">Pinoy Ako</option>
              <option value="70sShow">That 70's Show</option>
              <option value="CandyFactory">Candy Factory</option>
  </select>
          
<div>  <br/> <img id="img"><div>

您可以在地图中设置 url 图像，然后借助键可以动态设置 it.Though 我没有设置 urls..您可以这样做通过保存它并给出相对路径。

Answer 4

试试这个

$('#dropdown').on('change', function(){
  $('.mySlides').hide();
  switch (this.value) { 
 case 'MarvelUniverse': 
   $('.marvel').show();
  break;
 case 'masqueradeBall': 
   $('.masquerade').show();
  break;
 case 'PinoyAko': 
   $('.pinoy').show();
  break;  
 case '70sShow': 
   $('.show').show();
  break;
  case 'CandyFactory':
    $('.candy').show();
    break;
 default:
  // do nothing
}
})

.mySlides { display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> Let us know what is your preferred <select id="dropdown"></p>
<option  disabled value selected>THEME</option>
  <option value="MarvelUniverse">Marvel Universe</option>
  <option value="masqueradeBall">Masquerade Ball</option> <option value="PinoyAko">Pinoy Ako</option>
      <option value="70sShow">That 70's Show</option> <option value="CandyFactory" >Candy Factory</option>
</select>

<div class="mySlides marvel" > <!-- added class as per option name -->
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQd4l9mhjsOAPkR2nw2j8TsqGEi7z9i5W_wcucdb5JCKN04rc6Y&s" style="width:440px; height:190px;" alt="pic1">
  </div>
  <div class="mySlides masquerade"> <!-- added class as per option name -->
      <img src=https://images-na.ssl-images-amazon.com/images/I/91z31zyWYXL._UX679_.jpg style="width:440px; height:190px;" alt="pic2">
  </div>
  <div class="mySlides pinoy"> <!-- added class as per option name -->
   <img src="https://i2.wp.com/mommylevy.com/wp-content/uploads/2015/10/DIY-Costume-3.jpg" style="width:440px; height:190px;" alt="pic3">
  </div>
 
  <div class="mySlides show"> <!-- added class as per option name -->
     <img src="https://metvcdn.metv.com/K6sac-1452723250-106-lists-1970s_fashion_2.jpg" style="width:440px; height:190px;" alt="pic4">
  </div>
  <div class="mySlides candy"> <!-- added class as per option name -->
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDVwiXhLnWWu4gHMChUwa4QuYZ-IdTBuJv49eHFw47OofUJm5M&s" style="width:440px; height:190px;" alt="pic5">
  </div>

单击 select 按钮上的选项时如何显示图像？

how to show an image when a an option on select button is click?

html

javascript

css

jquery

codepen