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

时间：2019-10-21 09:11:51

标签： javascript jquery html css codepen

我刚刚开始参加Freecodecamp课程，但我只能填写调查表。 我想让“选择”按钮在用户选择主题时显示图像。

我认为我对CSS HTML的新手知识无法做到这一点。我希望如果Java语言或Jquery上的知识渊博的人可以使用这些语言来完成这项工作，那么我会对此提供帮助。

我已将此信息发布在我的密码笔上：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>

4 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

因此，我为您的图像添加了一个占位符。 此后，我编写了一个函数，该函数在更改下拉菜单时显示图像。如果您想要每个主题一个特定的图像，则需要扩展此功能。我现在只在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>

答案 2 :(得分：0)

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

您可以在地图中设置图片的网址，然后借助键u可以动态设置它。尽管我尚未设置网址。您可以通过保存并提供相对路径来做到这一点。

答案 3 :(得分：0)

尝试一下

$('#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>

相关问题
最新问题