HTML時從下拉菜單選項中選擇

Question

我有一個下拉菜單的代碼我怎麼能顯示圖像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/