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

Question

[Антон Вебсайтовский]

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

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

Шаблон:
https://jsfiddle.net/8h29bfzy/1/

Answer 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)
});

Comments

[Антон Вебсайтовский]

спасибо, о а я думал в value надо будет только цифры оставлять.
так, а если селект не один, как по ид ловить нужный селект?

[kuzubina]

Антон Вебсайтовский, нужно в общем HTML структуру понимать, можно от родительского блока отталкиваться и брать в нем див куда выводить общую сумму, можно брать следующий див который идет за селектом, способов много

[Антон Вебсайтовский]

kuzubina, я в селект добавил див id="kolvonomerov", как мне теперь селект по див ловить, учитывая код который мне сделал как пример.

[Антон Вебсайтовский]

kuzubina, хотя можно ловить селект не только по иду, но и по name, он же тож уникальный.

[Антон Вебсайтовский]

kuzubina, как-то так можно const select = document.querySelector('#select').getElementsByTagName('option');

[Антон Вебсайтовский]

Попытался так замутить, но не работает )))))
$('select').getElementsByTagName('kolvonomerov').on('change', function() {

[Антон Вебсайтовский]

О, а что я туплю ) ахаха, можно же было прям туда ид вписать и все.

$('#kolvonomerov').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)
});

Работает.

[Антон Вебсайтовский]

А может знаешь как теперь , передать в input в value.

[kuzubina]

Антон Вебсайтовский, по id это не совсем удобно будет, лучше тогда по классу, id у тебя уникальный должен быть один на странице

[kuzubina]

Антон Вебсайтовский, $('.input').val(значение)

[kuzubina]

Антон Вебсайтовский, отметь решением вопроса если помогло

[Антон Вебсайтовский]

kuzubina, так и есть, ид уникальный.

[Антон Вебсайтовский]

kuzubina, отмечу.

[Антон Вебсайтовский]

kuzubina, по поводу передачи в импут, по подробнее.

Вот пример где есть импут и кусок кода где я тупо цифры передаю в импут.
https://jsfiddle.net/8h29bfzy/5/

А как туда передать конечное значение цены, то есть не фиксированную цену, а общею стоимость к оплате.
$('#prs').val('54454');

[Антон Вебсайтовский]

А все, вот так работает, правильно ли я сделал?

$('#kolvonomerov').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);
  $('#prs').val(rezult);
});

[Антон Вебсайтовский]

Я пошел дальше, и решил добавить еще один пункт, количество дней, как теперь и его внедрить, чтобы и дни и номера, все считалось, суть такая, бронирование, 1 номер стоит 5.000 руб/день.

Пытаюсь понять, как мне щас объединить все, чтоб считалось и выводилось в #price.

Вот пример
https://jsfiddle.net/8h29bfzy/9/

Есть разные подработки подобного рода, нужны? об цене договоримся.

[Антон Вебсайтовский]

А как добавить точку? то есть в фиксированной цене есть точка, разделитель, 5.000 руб, а общая полученная цена, там уже нет точки.

Вроде чет типа того можно добавить, как-то.
.html(number_format(calc_summary_price(), 0, '.', '.')

Пробовал такой вариант: (не сработало)

$(totalPrice).html(number_format(rezult(), 0, '.', '.');

[Антон Вебсайтовский]

Пошел еще дальше, подумал, а как просто текстом вывести, количество выбранных номеров, а так же количество дней.

Пока ищу как это реализовать можно.

Пример:
https://jsfiddle.net/8h29bfzy/14/

[Антон Вебсайтовский]

Так по примерам из инета сделал вывод в тексте, выбранных пунктов из селектов.

//вывод в тексте кол-во номеров выбрано в селекте
$('#kolvonomerov').on('change', function() {
  var selectedText = $('option:selected', this).text();
  $("#allnom").text(selectedText);
});

//вывод в тексте кол-во дней выбрано в селекте
$('#kolvoday').on('change', function() {
  var selectedText = $('option:selected', this).text();
  $("#allday").text(selectedText);
});

Нормально ли? все работает, но есть но, как вывела значение из селекта, где не просто валуе стоит 1, 2 и так далее, а есть надпись 1 номер, 2 номера, вот я в текст вывожу, выводит он мне вместе со словом(номер), как просто число вывести? я понимаю что можно просто в валуе в селекте убрать и оставить цифры.

Рабочий пример:
https://jsfiddle.net/8h29bfzy/15/

[Антон Вебсайтовский]

Так методом тыка и включения логики ), я понял, как вывести из селекта с value, цифры, если там по мимо циферок есть и буквы.

Рабочий пример:
https://jsfiddle.net/8h29bfzy/16/

[Антон Вебсайтовский]

Так мне удалось, посчитать две цены, и вывести сумму общею, но есть проблема, все та же, нет точки, ну и то что я кол-во дней беру не с селекта, а с текста, где вывожу, кол-во выбранных дней, когда я меняю кол-во номеров, цена меняется, но когда я меняю кол-во дней, то цена не меняется, до того момента пока я не поменяю кол-во номеров, чтоб перезапустить процесс скрипта и он посчитал, вот в этом и проблема.

Рабочий пример, я там чуть расписал для себя, чтоб не забыть.
https://jsfiddle.net/8h29bfzy/24/

[kuzubina]

Антон Вебсайтовский, https://jsfiddle.net/tjwaLku6/

[Антон Вебсайтовский]

kuzubina, спасибо, работает, но есть делема, а как быть если в форме не 2, а более селектов, а у тебя там стоит чтоб все селекты шерстил, если опять же поставить вместо celect, #kolvonomerov, перестает работать.

Или я походу не правильно понял, celect, это просто название всей функции, или же он шерстит все селекты и в которых есть, то что задано в функции js, шерстит, в моем случае, шерстит селект const totalNumbers = $('#kolvonomerov').val().match(/\d*/)[0]

[kuzubina]

Если ты поставишь #kolvonomerov то будет работать только при изменении этого селекта, если ты изменишь селект с выбором дней, тогда у тебя не будет работать подсчет общий, нужно понимать всю структуру html чтобы сделать рабочий вариант, это только примеры того, как это можно реализовать

[Антон Вебсайтовский]

kuzubina, да я понял, там у меня датапикер подключен, где дата состоит из двух выборов, выезд и заезд, и я ставлю допустим 20 число заезда, а выезд 25, и того выходит 5 дней, их я вывожу в текст на странице, ну и вылавливаю по ид и уже плюсую в твоем скрипте, но пока не выходит допилить.

Вообщем, перенес пример формы без валидации, внедрил скрипт подсчета. (видно что делема осталась), можно конечно дни брать не со скрипта датапикера где ниже в коде видно, что есть вывод полученных дней по ид, а подсчет запилить уже в твой скрипт, но я сам чет пока не пойму, хотя зачем делать если уже есть вывод, главное плюсовать чтоб все ок было, еще ошибку заметил если сумма больше чем 100.000 то он ставит точку то есть .100.000, выходит так.
https://jsfiddle.net/hLyns80q/2/

[Антон Вебсайтовский]

kuzubina, так и как быть с моим вариантом? как сделать чтоб все ок работало. Учитывая что мы не берем кол-во дней с селекта, там датапикер там 2 селекта с датой, и датапике скрипт который высчитывает дни и я их вывожу в одном место по id, ну и так же хочу их передать чтоб считалось.
Так почти сделали и большое спасибо тебе, ток с ценой еще проблема, если больше 6 знаков, точка с переди добавляется.

[Антон Вебсайтовский]

Так, вообщем вот решение, если что https://jsfiddle.net/gLu25zeb/
Спасибо за помощь.

Answer 2

[Илья]

Для начала Вам нужно получить элемент в который вы будете выводить финальную цену
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 // Выводим значение на страницу 
  })

Comments

[Антон Вебсайтовский]

Спасибо, так чет выводит NaN, https://jsfiddle.net/8h29bfzy/2/

[Егор Живагин]

Антон Вебсайтовский, попробуйте const n = +this.value

[Антон Вебсайтовский]

Егор Живагин, не тож самое

[Егор Живагин]

Антон Вебсайтовский, Тогда выводите в консоль this.value, смотрите, что туда приходит

Хотя вообще, функция выглядит странно, должно быть как-то так:

selectValue.addEventListener('change', function(event) {
 const n = event.target.value;
  price.innerHTML = n*5000 // Выводим значение на страницу 
  })

[Дмитрий Мединский]

Антон Вебсайтовский, Егор Живагин, в value лежит n номеров. Советую в value ложить реально значение, а не описание

[Илья]

Антон Вебсайтовский, Задачка на внимательность. У Вас в option value="2 номера" лежит описание а не только число. Соответственно, так как в n*5000 происходит умножение строки на число, получаете на выходе Not A Number (NaN) . Должно быть просто значение option value="2"

Answer 3

[Дмитрий Мединский]

<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;
});

Comments

[Антон Вебсайтовский]

спасибо