Question

我有下拉菜单的代码：

</center>
<p>
<center><select>
  <option value="none">None selected</option>
  <option value="cat">cat</option>
  <option value="dog">dog</option>
</center></select>
</p>

我希望能够在选择“cat”选项时显示猫的图像（例如http://www.petfinder.com/wp-content/uploads/2012/11/95142833-crate-training-cat-632x475.jpg）以及替代文本（例如“无法加载猫的图像”）图像无法加载。我怎么能这样做？

Answer 1

你问简单HTML无法做到的事情。

除了HTML代码，您还应该使用JavaScript。

我建议你开始学习Javascript。

这是链接。 http://www.tutorialspoint.com/javascript/

倾斜它......实施它。你将达到你的目标。

All The Best .. !!

Answer 2

您可以在选择框中的值更改中插入图像，我会这样做：

HTML：

<select id="pic-changer">
  <option value="none">None selected</option>
  <option value="cat" data-picture="cat.png">cat</option>
  <option value="dog" data-picture="dog.jpg">dog</option>
</select>
<div id="image-location></div>

jquery（javascript）代码：

$('#pic-changer').change(function(){ //if the select value gets changed
   var imageSource = $(this).find(':selected').data('picture'); //get the data from data-picture attribute
   if(imageSource){ //if it has data
      $('#image-location').html('<img src="'+imageSource+'">'); // insert image in div image-location
   } else {
      $('#image-location').html(''); //remove content from div image-location, thus removing the image
   }
})

如果您不需要选择框值，我建议将图片链接放在那里：

<select id="pic-changer">
  <option value="">None selected</option>
  <option value="cat.png">cat</option>
  <option value="dog.jpg">dog</option>
</select>

jQuery代码变为：

   $('#pic-changer').change(function(){ //if the select value gets changed
   var imageSource = $(this).val(); //get the selected value
   if(imageSource && imageSource != ""){ //if it has data
      $('#image-location').html('<img src="'+imageSource+'">'); // insert image in div image-location
   } else {
      $('#image-location').html(''); //remove content from div image-location, thus removing the image
   }
})

你可以用javascript和jQuery做更多的事情我建议你学习它，它并不难。 http://jquery.com/

html - 当选择下拉菜单中的选项时，如何显示图像

2 个答案: