Javascript-форум - Выпадающий список в HTML. Отображение данных в зависимости от значения из списка

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Выпадающий список в HTML. Отображение данных в зависимости от значения из списка (https://javascript.ru/forum/dom-window/69749-vypadayushhijj-spisok-v-html-otobrazhenie-dannykh-v-zavisimosti-ot-znacheniya-iz-spiska.html)

Выпадающий список в HTML. Отображение данных в зависимости от значения из списка

Приветствую! Столкнулся с такой задачей. Нужно, чтобы в Index.html был выпадающий список, при выборе значений которого у меня бы изменялась информация. Например, если в выпадающем списке выбран апельсин, то подгружалась бы его фотка и данные по цене и весу, а если лимон, то соответственно его данные по цене и весу. Подскажите, как можно это реализовать?

рони,
Спасибо большое! А можно, пожалуйста, пример кода не с диалоговым окном, а в конкретном текстовом поле?
Буду очень признателен!

maxx787,
html и css минимальные сделайте
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

maxx787,
селектор, картинка, таблица и всем классы придумайте

похожая ситуация, только не совсем понимаю. Пишу калькулятор, 3 тарифа и у каждого 4 процентых ставки (зависят от срока). Как сделать так, чтобы выводимая информация зависела от двух значений, которые я выбираю (тарифный план и срок)?

новичок,

var val = [[1,2,3,4],[5,2,7,8],[9,10,11,12]][select_tarif.value][select_time.value];

Если не справишься напиши формулу.

Сделал https://jsfiddle.net/brqqwwkm/
Переношу результат локально на компьютер и уже не работает..

Цитата:

Сообщение от maxx787

Переношу результат локально на компьютер, и уже не работает..

песочница запускает код когда страница готова.

window.addEventListener('DOMContentLoaded', function() {
// здесь ваш код
})

maxx787,
для кого всё выше писалось, непонятно ... :(

Посмотрите пожалуйста, где я мог допустить ошибку?

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Пример</title>
 </head>
 <body> 
  <script type="text/javascript">
fruit.onchange = function(argument) {
  if (limon.selected) {
    vec.innerHTML = "50";
    cena.innerHTML = "40";
  };
  if (orange.selected) {
    vec.innerHTML = "30";
    cena.innerHTML = "20";
  };
}
  </script>
  
<select id="fruit">
  <option value="1" id="orange">апельсин</option>
  <option value="2" id="limon">лимон</option>
</select>
<br/>
<table border="1" class="m">
  <tr>
    <td width="50px">Вес</td>
    <td width="50px"> Цена</td>
  </tr>
  <tr>
    <td id="vec" height="20px"></td>
    <td id="cena"></td>
  </tr>
</table>  
 </body>

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>

Огромнейшее спасибо!!:)