-2

ドロップダウンメニューのコードがあります：

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

「 _ _ cat」オプションが選択され、画像を読み込めなかった場合は代替テキスト (「猫の画像を読み込めませんでした」など) も選択されます。これどうやってするの？

4

2 に答える 2

3

選択ボックスの値の変更時に画像を挿入できます。私は次のようにします：

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/

于 2013-05-16T10:39:29.667 に答える
2

単純な HTML ではできないことをお聞きします。

HTML コードの追加では、JavaScript を使用する必要があります。

Javascriptの学習を開始することをお勧めします。

ここにリンクがあります。http://www.tutorialspoint.com/javascript/

リーン・イット・インプリメンテーション。あなたはあなたの目標を達成します。

ではごきげんよう..！！

于 2013-05-16T10:37:46.997 に答える