Изменить изображение при нажатии тега опции

-5

У меня есть два тега select в моем HTML, и я хочу использовать эти два варианта с возможностью изменения изображения. Один из тегов выбора называется моделью, а другой называется цветом. Когда я хочу щелкнуть одну из моделей, которые находятся в теге select, изображение должно быть изменено на эту модель, а затем они могут щелкнуть по цвету, и цвет этой модели должен измениться.Изменить изображение при нажатии тега опции

У кого-нибудь есть советы, чтобы это произошло.

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

показать нам код! –

введите код или то, что вы пытались его достичь – BNN

Попробуйте что-то вроде этого. Вы должны переименовать свои изображения в зависимости от выбора. model_colour.jpg. Например: 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

Большое спасибо за помощь. Он отлично работает прямо сейчас. –

Изменить изображение при нажатии тега опции

ответ

Смежные вопросы