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

Question

我有一个下拉菜单的代码：

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

我希望能够在“猫”选项被选中，如果图像无法加载，也会选择替代文本（例如“猫的图像无法加载”）。我怎样才能做到这一点？

Answer 1

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

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/

Answer 2

你问一些简单的 HTML 不可能的事情。

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

我建议你开始学习 Javascript。

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

精益它..实施它。你会达到你的目标。

一切顺利..！！