CoolHeart
@CoolHeart
Junior FrontEnd developer

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

Здравствуйте! Сразу извиняюсь за банальность вопроса, верстаю давно, но с JS всегда было туго у меня. Стоит задача: в зависимости от выбранного значения option в теге select выводить ниже без перезагрузки страницы цену матраса, значение цены будет браться из таблички. Буду очень благодарен за простенький пример реализации, спасибо.
0232f4c102d14379a82fc3c0b1cb6465.jpg
  • Вопрос задан
  • 917 просмотров
Решения вопроса 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
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
но с 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);
});
Ответ написан
Stalker_RED
@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/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы