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

[Aleksandr-JS-Developer]

Вам нужно, первым делом, отвязать все ваши данные от DOM.
В DOM хранить информацию следует только в обстоятельствах, когда это необходимо или очень ускорит/облегчит работу программы (моё мнение, подтверждённое опытом, порой, довольно печальным).
Потому, что DOM - это лишь способ вывода информации пользователю. А счёт, учёт, обработка данных и так далее - задача уже для JavaScript`а.

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

Ссылки:
Браузерные события (ru)
В частности, объект события (ru)

Comments

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

Ох какой мощный пример, с пояснениями, селект можно было и не делать через js, а просто в html вывести, яж там классы присваиваю и селект2 скрипт.

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

Плохо что если я хочу поменять цену, то мне надо лесть в js и вписывать ее, const PRICE = 5;
А цена есть в выводе, ее я вывожу из бд, и там же меняю, эту цену автоматически брать по хорошему надо. присвоить ид и вытягивать от туда.

[Aleksandr-JS-Developer]

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

Плохо что если я хочу поменять цену, то мне надо лесть в js. ... А цена есть в выводе, ее я вывожу из бд, ... эту цену автоматически брать по хорошему надо.

Не совсем понял, вы берёте всю страницу из БД целиком? По-хорошему надо присылать разметку с JS. Через JS делать запрос на сервер. С запроса брать данные и вставлять их в разметку. Или, делать всё тоже самое, но вместо JS использовать PHP ещё до отправки клиенту.

присвоить ид и вытягивать от туда.

кто мешает человеку залезть в f12 и поменять цену и только потом нажать на выбор количества??

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

Aleksandr-JS-Developer, из бд, я беру только цену фиксированную, сообщение выше, там уже многое удалось сделать, но не все, может сможете помочь, посмотрите, сообщение выше.

[Aleksandr-JS-Developer]

ну, тогда напишите вместо ненависного const PRICE = 5, запрос в DOM... вот так

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

Aleksandr-JS-Developer, так, а если в скрипт не пихать html код селекта, а вывести, а то как-то непонятно для меня, пусть селект будет обычно в html, так лучше, и стили применять и т.д

Я там пытался добавить число которое меняется будет, пока просто добавил и по id выдергиваю его и надо чтоб сумма на него тож умножалась.

Селект тож вывел обычно, но не работает.

https://jsfiddle.net/Lk1epbo7/3/

[Aleksandr-JS-Developer]

Вот то, что вы хотите сделать? >> link

Но, повторюсь, не надо хранить никаких данных в разметке. Это чревато.
Не совсем ясно, зачем вы упёрлись в своё мнение, раз компетенции в вопросе не имеете от слова совсем.. Вы неправильно реализуете логику на клиенте.
И не важно, что происходит на бэкенде или как вам удобно. Есть общепринятые принципы работы веб-интерфейсов, и написания оных. Эти принципы придуманы не для запары, а для того, чтобы запары не появлялось.
Чтобы перестать давать задания на форумах (что, кстати, нарушает правила данного ресурса), посмотрите курсы по веб-разработке или наймите ментора..
Проект ваш, но я очень советую перестать вставлять данные в HTML и "дёргаю оттуда". Никто так не делает.
Когда у вас сломается всё к едрени-фени и вы полезете на форум, то, с вероятностью 100%, вам скажут, что братан, давай отделяй данные от разметки или используй SSR.

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

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

а что означает это? updateTotalPrice( 1 );

и тут в конце 3, что означает

const updateTotalPrice = count => {
	price.innerHTML = ( PRICE * count ).toFixed( 3 );
}

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

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

Вообщем что что у меня вышло, https://jsfiddle.net/dhtvp4fc/1/
При выборе даты, там 2 селекта, идет подсчет сколько дней я выбрал от и до, и выводится этот подсчет снизу, так же при выборе кол-во номеров, тож идет подсчет и выводится ниже.
Далее из всех этих значений я формирую общею цену, беру фиксированную цену и умножаю на выбранные дни и количество выбранных номеров и выводится общая сумма к оплате, схема простая.

[Aleksandr-JS-Developer]

а что означает это? updateTotalPrice( 1 );

Этот кусок кода вставляет на на страницу посчитанную цену за "1 номер". В списке первый выбран по-умолчанию, а цены за него нет.

и тут в конце 3, что означает

Это округление числа в скобках до трёх знаков после запятой. Если число целое, то после запятой вставляються нули. В данном случае - три нуля. Если не целое, то округляется математически до трёх знаков после запятой.

https://jsfiddle.net/dhtvp4fc/1/

Датапикер не подключён. $.datepicker === undefined. Скрипт лежит.

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

Aleksandr-JS-Developer, если бы скрипт лежал, не работало бы это окно. если убрать подгрузку его, то вообще кликая на селект ничего не будет происходить, там id не датапикера вставляется, а start и end, должен был понять по коду, но почему он пишет что датапикер не подключен непонятно, хотя работает датапикер.


Про цену с 0.000, как-то не лепо выглядит, когда тор 0.000, уж лучше пусть 0, я пробовал ставить и тож он добавляет 0.000.

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

[Aleksandr-JS-Developer]

В функции, которая вставляет общую цену вставьте проверку, если цена 0, то вставляйте без toFixed, если не 0, то с toFixed.

spoiler

const updateTotalPrice = count => {
  	let totalPrice = (PRICE * count);
   	price.innerHTML = totalPrice === 0 ? totalPrice : totalPrice.toFixed(3);
  }

Да, датапикер работает, я видел.

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

Обычно, когда я попадаю в ситуации, когда уже долго на одном месте кручусь и не могу понять, что делать, то я переписываю по новой кусок программы. И хорошо, если это скрипт на сто строк кода. Я переписывал с нуля целые интернет магазины... Сейчас, конечно, такого нет, то тогда оно помогало.

Вообще, я что-то сбился с сути нашей переписки. В чём проблема? Что не работает? Не считает разницу дат?
Вот, теперь считает, вы там напутали с форматом.

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

Aleksandr-JS-Developer, Так что у нас выходит, подсчет дней делается в скрипте в датапикере и выводятся дни по id days_count, эти дни мы умножаем на фиксированную сумму и выводим ее, потом эти дни которые выбраны в дате, кол-во, так же выводятся снизу их видно, где и выводится общая сумма к оплате за все, кол-во дней, выводится также снизу там же, и эти дни умножаются на сумму которая мы получили, выходит 1 номер, стоит 6.000 руб/ночь. (ну то есть день).

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

Получается в твоем скрипте мы берем кол-во номеров id allnom, и кол-во выбранных дней id days_count, умножаем на фикс цену, все просто, ток чет не умножает и не выводит цену.

Вот поправил чтоб ок было: но не считает, ну и как по дефолту цену 0 показывать, без 0.000, а то выглядит как-то не красиво.

https://jsfiddle.net/m8z45uka/3/

[Aleksandr-JS-Developer]

Получается в твоем скрипте мы берем кол-во номеров id allnom, и кол-во выбранных дней id days_count, умножаем на фикс цену, все просто, ток чет не умножает и не выводит цену.

Мой скрипт работает. Только его недостаточно встроить в вашу программу. Его надо адаптировать к вашей среде.

Ваш код

https://jsfiddle.net/m8z45uka/3/

Не работает. По-крайней мере так, как вы хотите.
Всё потому, что вы запутались. Что будет, если вам понадобиться обрабатывать ещё несколько инпутов? Ваш код неоптимизированный. На каждое действие пользователя, программа выполняет зря очень дорогостоящие операции. Это незаметно не вооруженным глазом, но если кол-во кода растёт, то и просадки производительности тоже.

А запутались вы потому, что, как я называю, не отделили мух от котлет.
А именно - вам нужно чётко разделить зоны ответственности кода.
Это значит, что одна функция занимается вставкой на страницу, другая подсчётом данных, третья - обрабатывает действия кода. Одна функция не должна выполнять две задачи. Для двух задач нужны две функции.
Причём все данные проходят через хранилище. Если хотите вставить данные по-умолчанию, то просто вставляете их в нужное поле в state.
Если этого нет - в коде хаос и беспорядок. Чтобы отследить откуда что и куда вставилось нужно нанимать целую команду следователей.

Вот как примерно должно выглядеть то, про что я писал выше. Это только набросок, советую потестить. Если вздумаете использовать, то маякните, могу немного потестировать.

spoiler

За такое, обычно, берут деньги, вообще-то, но я давно не писал подобных модалок, полезно размяться иногда. Но вряд-ли кто-то сделает так-же. Так что советую, всё-таки, подучить JS и программирование в целом, пригодиться точно.
На фрилансе около 700-800 руб может такая модалка стоить.

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

Aleksandr-JS-Developer, ну да, вот я и пытаюсь скрипт встроить ), по этому пишу что не работает, так как пока не вышло это сделать ). между прочим я не против оплатить работу ). и как бы ожидаю что кто-то поможет и я отблагодарю. А какие у тебя навыки, оставь телегу, где в инете профиль глянуть можно.

Тут подсчет дней перестал работать, а зачем скрипт датапикера трогал, там же все ок и можно было не трогать. Яж прислал выше, послдений пост, где как бы все работает, кроме вывода цены, лишнее и не надо пихать. Ну и написал что желательно поправить. про цену 0.000
А я понял, ты там подсчет переделал дней в дадапикере, убрал тот что было и переделал. Ток оно не считает.
https://jsfiddle.net/alexander_js_developer/z85p10jg/

[Aleksandr-JS-Developer]

... между прочим я не против оплатить работу ) ... и как бы ожидаю что кто-то поможет и я отблагодарю.

Если будете настаивать, то я, конечно, только с радостью, но помогаю без оглядки в эту сторону.

Яж прислал выше, послдений пост, где как бы все работает, кроме вывода цены, лишнее и не надо пихать

Как раз всё наоборот, всё это не лишнее. Лишнее я и вырезал. У вас там бардак полный.
У вас нет чёткого вывода цены. Вывод цены у вас по всему приложению раскидан.

Такой код бывает, когда...

... программист не имеет опыта или умений. От просто берёт и делает программу. Надо считать - считает. Надо выводить - выводит. Надо и то и другое - пожалуйста. Не выходит - в интернет, Ctrl+C Ctrl+V и погнали дальше.
Только перед написанием нужно спроектировать приложение. Хотя-бы в голове. Не думайте, что я вас просто унижаю или что ещё. Вы, видно, человек практичный, вам можно объяснить прямо что не так. Вам необходимо представить как всё будет работать, откуда, что и куда. Тут очень опыт нужен.

Если у вас в коде что-то сломается, то пиши пропало. Тем более, если не удалось быстро решить проблему. Сугубо по личному опыту. Если вы делаете что-то крупнее одного модального окна, то, судя по-всему, вы делаете всё уже достаточно большой промежуток времени... Небось оптимизируете постоянно, чтобы быстрее при открытии сайты открывались. Вы хоть сборщики, я надеюсь, используете? Или всё руками, по-старинке?

переделал. Ток оно не считает.

Что конкретнее не работает, что вы делаете, что ожидаете, а что происходит или не происходит?
Там вы практически дублируете функции. Я, пока выводил в консоль дату на всех этапах её обработки, чуть не поседел. Причём, эти функции выполняли всё подряд и без какого либо порядка и организации.

Ну и написал что желательно поправить. про цену 0.000

Цену я поправил.. Опять таки, что вы делали, что ожидали и что получили?


Кстати, вопрос про сборщик актуальный. Сборщик може прогонять через транспилятор ваш код превращая его в старый, но не меняя функционал. Это нужно для совместимости приложения со старыми браузерами, да и вообще, очень помогает при кроссбраузерной разработке.

А какие у тебя навыки, оставь телегу, где в инете профиль глянуть можно.

Навыки есть в моём профиле. Там немного с юмором, но по делу.

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

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

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

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

Answer 3

[Илья]

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

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

<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

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

спасибо