Показать сообщение отдельно
  #13 (permalink)  
Старый 16.07.2017, 21:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

maxx787,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
 window.addEventListener("DOMContentLoaded", function() {
    var select = document.querySelector(".fruit"),
        img = document.querySelector(".show"),
    weight = document.querySelector(".weight"), 
    price = document.querySelector(".price");
    select.addEventListener("change", function() {
        var obj = {
            orange: {
                weight: 60,
                price: 80,
                src: "http://umeha.3dn.ru/img-o/orangel-150612.jpg"
            },
            limon: {
                weight: 20,
                price: 40,
                src: "http://sad-ogorod-svoimi-rukami.ru/wp-content/uploads/2012/09/images43.jpg"
            }
        }[select.value];
        if (obj) {
            weight.innerHTML = obj.weight;
            price.innerHTML = obj.price;
            img.src = obj.src
        }
    })
});
  </script>
</head>

<body>
<select class="fruit">
  <option value="orange" >апельсин</option>
  <option value="limon" >лимон</option>
</select>
<br/>
<table border="1" class="m">
  <tr>
    <td width="50px">Вес</td>
    <td width="50px"> Цена</td>
  </tr>
  <tr>
    <td class="weight" height="20px">60</td>
    <td class="price">80</td>
  </tr>
</table>
<img src="http://umeha.3dn.ru/img-o/orangel-150612.jpg" alt="" class="show">
</body>
</html>
Ответить с цитированием