Select, при выборе кол-во, меняется цена, умножается, как реализовать?

Привет спецы и не только :)
Вопрос довольно простой, но для меня сложный, новичок в js.

Есть постоянная цена, которая не меняется, есть селект, в нем пункты, количество, 1,2,3 и так далее, есть еще одна цена, которая меняется, когда мы выбираем в селекте кол-во 2 и так далее, цена умножается на это число, как такое реализовать, подскажите.

Шаблон:
https://jsfiddle.net/8h29bfzy/1/
  • Вопрос задан
  • 138 просмотров
Решения вопроса 1
@kuzubina
<label>Количество номеров <b>*</b></label>
<select name="kolvonomerov">
<option value="1 номер" selected="selected">1 номер</option>
<option value="2 номера">2 номера</option>
<option value="3 номера">3 номера</option>
<option value="4 номера">4 номера</option>
<option value="5 номеров">5 номеров</option>
<option value="6 номеров">6 номеров</option>
<option value="7 номеров">7 номеров</option>
<option value="8 номеров">8 номеров</option>
<option value="9 номеров">9 номеров</option>
<option value="10 номеров">10 номеров</option>
</select>
<br/><br/>
Основная цена, фиксированная: <b class="fix-price">5.000</b> руб.
<br/><br/>
Общая стоимость к оплате: <b id="price"></b> руб.


$('select').on('change', function() {
  const fixPrice = $(".fix-price").html().replace(/\./,'')
  const totalPrice = $('#price')
  const val = this.value.match(/\d*/)[0]
  const rezult = +fixPrice * +val
  $(totalPrice).html(rezult)
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Вам нужно, первым делом, отвязать все ваши данные от DOM.
В DOM хранить информацию следует только в обстоятельствах, когда это необходимо или очень ускорит/облегчит работу программы (моё мнение, подтверждённое опытом, порой, довольно печальным).
Потому, что DOM - это лишь способ вывода информации пользователю. А счёт, учёт, обработка данных и так далее - задача уже для JavaScript`а.

Вот, набросал вам пример: https://jsfiddle.net/alexander_js_developer/brewhd0m/

Ссылки:
Браузерные события (ru)
В частности, объект события (ru)
Ответ написан
ipfgr
@ipfgr
Js like hobby
Для начала Вам нужно получить элемент в который вы будете выводить финальную цену
const price = document.querySelector("#price")

Затем Вам нужно получить значение из Select, для этого нужно добавить id для select и затем получить значение
const selectValue = document.querySelector("#select")


Далее добавляем прослушку события. Для выбора Select событие называется "Change"
selectValue.addEventListener('change', function() {
 const n = this.value; 
  price.innerHTML = n*5000 // Выводим значение на страницу 
  })
Ответ написан
Dimski
@Dimski
Программирование - мое хобби
<label>Количество номеров <b>*</b></label>
<select name="kolvonomerov" id="kolvonomerov">
<option value="1" selected="selected">1 номер</option>
<option value="2">2 номера</option>
<option value="3">3 номера</option>
<option value="4">4 номера</option>
<option value="5">5 номеров</option>
<option value="6">6 номеров</option>
<option value="7">7 номеров</option>
<option value="8">8 номеров</option>
<option value="9">9 номеров</option>
<option value="10">10 номеров</option>
</select>
<br/><br/>
Основная цена, фиксированная: <b>5.000</b> руб.
<br/><br/>
Общая стоимость к оплате: <b id="price"></b> руб.


let pricePerUnit = 5000;

document.getElementById('kolvonomerov').addEventListener('change', (e) => {
	document.getElementById('price').innerHTML = e.target.value * pricePerUnit;
});
Ответ написан
Ваш ответ на вопрос

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

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