JS вывод значения после выбора определенного, как?

Question

[Виктор Викторов]

Здравствуйте! Сразу извиняюсь за банальность вопроса, верстаю давно, но с JS всегда было туго у меня. Стоит задача: в зависимости от выбранного значения option в теге select выводить ниже без перезагрузки страницы цену матраса, значение цены будет браться из таблички. Буду очень благодарен за простенький пример реализации, спасибо.

Answer 1

[Артём Лучников]

А зачем с таблицей усложнять? в option указываете цену в атрибуте value:

<select>
    <option value="7827 руб">80x190/200см</option>
    <option value="8768 руб">90x190/200см</option>
    <option value="11271 руб">120x190/200см</option>
</select>
<p>Цена матраса: <span id="price"></span></p>

Ну и дальше все просто:

$('select').on('change', function(e) {
    	$('#price').text($(this).val());
});

Пример на jsfiddle

Comments

[Виктор Викторов]

боюсь значение value в option изменить будет не лучшим решением, т.к. это значение выбранного матраса отправляется формой на email менеджеру, который должен знать размер матраса в заказе.

[Артём Лучников]

можете использовать data атрибуты https://jsfiddle.net/gm0h726o/1/

Answer 2

[Stalker_RED]

<select name="price">
  <option value="100">маленький</option>
  <option value="500">большой</option>
  <option value="100500">гигантский</option>
</select>
<div id="priceDisplay">100</div>

$('select[name="price"]').on('change', function(){
  $('#priceDisplay').html(this.value)
})

https://jsfiddle.net/qqqe14gb/

Answer 3

[Максим Тимофеев]

но с JS всегда было туго у меня

Судя по вопросу не туго, а не было вовсе. Срочно подтягиваете ибо верстальщик без js не бывает. html+css+js(или jquery) - это must have для верстальщика. Есть еще куча технологий, но без этих никак.

Теперь по делу:
Делаем у таблицы у tr id равный value option, а дальше так

$('#select_id').on('change',function(){
   var size_id = $(this).val();
   var price = $('tr#' + size_id).find('td').eq(1).html();
   $('.somePriceContainer').html(price);
});

Comments

[Виктор Викторов]

немного не в тему, но: за полный день до подобного уровня знаний при самостоятельном изучении можно дотянуть?)

[Максим Тимофеев]

Виктор Викторов: возможно, а у Вас только 1 день есть? Вас заказали?

Answer 4

[lipinart]

Думаю, разберешься
https://ruseller.com/lessons.php?id=889&rub=33