изображения и список выбора javascript

Question

У меня есть эти продукты, которые я хотел бы появиться на моем сайте. Я хочу, чтобы изображения отображались, когда они выбраны в списке выбора. поэтому, когда я выбираю «сапоги», на моем сайте будет отображаться образ ботинок. Я думаю, если бы я установил изображения в скрытые в html, а затем, если он выбран, то конкретное изображение становится скрытым, используя оператор if в javascript. любая помощь, которую я не могу заставить работать javascript. Благодарю.

HTML:

<div id="product1"> 
    <img src="Jersey.jpg" style="visibility:hidden;" /> 
</div> 

<div id="product2"> 
    <img src="boots.png" style="visibility:hidden;" /> 
</div> 

<td class="inputcell"> 
     <select name="prod" id="prod"> 
      <option id="product1" value="0">Products from Sports World</option> 
      <option id="product2" value="50.00">Jersey ($50.00)</option> 
      <option id="product1" value="45.50">Boots ($45.50)</option> 
     </select> 
</td> 

JavaScript:

for (var i = 0; i < products.length; i++) 
{ 
    if (products[i].id == selected_id){ 

    } 
} 

Answer 1

Используйте это:

$('select option').click(function() { // on a click on option.. 
    if($(this).val() == '50.00') { // jersey selected 
    $('.jersey').show(); 
    } else if($(this).val() == '50.00') { 
    $('.boots').show(); // hide images on your own! :) 
    } 
} 

А также, изменить их:

<img src="boots.png" style="visibility:hidden; img/> 

К этим:

<img src="boots.png" class="boots" style="display: none;"/> 

Аналогичная вещь для изображения трикотажа, убедитесь, что он становится видимым после выбора правильной опции!

Answer 2

проблема одна ... IDS уникальны. они должны быть прикреплены к одному элементу и только одному элементу.

проблема два им не Суер, где вы получите «products.length»

три <img src="boots.png" id='boots' class='catimg'/>

не использовать встроенные стили никогда

применяется идентификатор для другого изображения, а так же как класс catimg. то вы должны применить атрибуты имени в список ваших товаров

$("#myselect").on("change",function(){ 
var name = $(this).val(); 
    if(!$(this).hasClass("active")){ 
     $('.active').hide(0).removeClass('active'); 
     $("#" + name).show(0).addClass("active"); 
    } 

})