单击选项标签时更改图片

-5

我在我的HTML中有两个选择标签，我想用这两个选择选项来更改图像，其中一个选择标签称为模型，另一个称为颜色。当我想点击选择标签中的一个模型时，图像需要更改为该模型，然后他们可以点击一种颜色，并且该模型的颜色需要更改。单击选项标签时更改图片

有没有人有提示，使这种情况发生。

HTML代码

    <tr>  
         <td><label>Model* :</label></td> 
         <td> 
          <select name="model" required> 
           <option value="cortina-ecomo-life-transport">Cortina Ecomo Life Transport</option> 
           <option value="merida-TFS-100">Merida TFS-100</option> 
           <option value="cortina-transport-roots-3">Cortina Transport Roots 3</option> 
          </select> 
         </td> 
        </tr> 
        <tr>  
         <td><label>Kleur* :</label></td> 
         <td> 
          <select name="kleur" required> 
           <option value="zwart">Zwart</option> 
           <option value="blauw">Blauw</option> 
           <option value="groen">Groen</option> 
           <option value="geel">Geel</option> 
           <option value="rood">Rood</option> 
           <option value="bruin">Bruin</option> 
           <option value="paars">Paars</option> 
           <option value="wit">Wit</option> 
          </select>        
         </td> 
        </tr>

我没有更多的则在这一刻，我已经尝试过的东西用jQuery，但没有奏效。

Like they did on this website

它必须成为这样的事情，当你点击一个选项，在那里它改变

来源

2014-09-22 Stefan van de Wiel

显示你的代码。 – Developer 2014-09-22 08:03:46

告诉我们的代码！ – 2014-09-22 08:03:47

把一些代码，或者你试图实现它 – BNN 2014-09-22 08:03:49

尝试这样的事情。您应该根据选择重新命名图像。 model_colour.jpg。 E.g：cortina_rood.jpg

var imgsrc; 
 
changeImage(); 
 

 
function changeImage() { 
 
\t imgsrc = $('#model').val() + '_' + $('#kleur').val() + '.jpg'; 
 
\t $('#yourimage').attr('src', imgsrc); 
 
} 
 

 
$("#model").change(function() { 
 
\t changeImage(); 
 
}); 
 

 
$("#kleur").change(function() { 
 
\t changeImage(); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
</head> 
 
<body> 
 
\t <table> 
 
\t \t <tr> 
 
      <td><label>Model* :</label></td> 
 
      <td> 
 
       <select name="model" required id="model"> 
 
        <option value="cortina">Cortina Ecomo Life Transport</option> 
 
        <option value="merida">Merida TFS-100</option> 
 
        <option value="cortina">Cortina Transport Roots 3</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><label>Kleur* :</label></td> 
 
      <td> 
 
       <select name="kleur" required id="kleur"> 
 
        <option value="zwart">Zwart</option> 
 
        <option value="blauw">Blauw</option> 
 
        <option value="groen">Groen</option> 
 
        <option value="geel">Geel</option> 
 
        <option value="rood">Rood</option> 
 
        <option value="bruin">Bruin</option> 
 
        <option value="paars">Paars</option> 
 
        <option value="wit">Wit</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <img src="" alt="" id="yourimage"> 
 
\t </table> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 
</html>

来源

2014-09-22 09:08:49

非常感谢你的帮助，它现在正在完美地工作。 – 2014-09-22 10:37:08

单击选项标签时更改图片

回答

相关问题