Javascript-форум - Дублировать значение select s span

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Дублировать значение select s span (https://javascript.ru/forum/jquery/74114-dublirovat-znachenie-select-s-span.html)

Дублировать значение select s span

Здравствуйте есть форма:

Агрегат
<select name='sel1'>
 <option value='480'>Вал тип 1</option>
 <option value='556'>Вал тип 2</option>
</select><br>
Цена: <span id="sel1">0</span> руб

Центральная смазка
<select name='sel2'>
 <option value='0'>Нет</option>
 <option value='23'>Да</option>
</select><br>
Цена: <span id="sel2">0</span> руб


Двойной подшипник
<select name='sel3'>
 <option value='0'>Нет</option>
 <option value='22'>Да</option>
</select><br>
Цена: <span id="sel3">0</span> руб

Общая стоимость выбранных позиций: <span id="sum">0</span> руб

И обработчик:

<script type="text/javascript">
$(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы

$("select[name^='sel']").change(function() {
  var s = $('select[name^="sel"] option:selected').map(function() {
  
   $("#sel1").innerHTML = s;   
 
    return this.value
  }).get()

  var sum = s.reduce((pv, cv) => {
    return pv + (parseFloat(cv) || 0);
  }, 0);
 $("#sum").text(sum.toLocaleString()); //Разделить разряды
})
</script>

Обработчик считает сумму выбранных опций и передает все это в переменную sum, это работает, но как выводить цену при изменении Select'a??? При изменении select sel1, возле него у span id должна измениться цена: <span id="sel1">0</span> руб. (цена равна value селекта). Таких селектов может быть до 15 штук

Вопрос для тех кто в знает ламерский, но очень прошу помочь

kk450,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function(){
var sel = $("select[name^='sel']")
sel.change(function() {
  var sum = 0;
  sel.each(function(i, el) {
      var num  =  +this.value||0, id = "#"+this.name;
      sum += num;
      $(id).text(num)
  	});
  $("#sum").text(sum);
}).trigger('change')
});
</script>
</head>

<body>
Агрегат
<select name='sel1'>
 <option value='480'>Вал тип 1</option>
 <option value='556'>Вал тип 2</option>
</select><br>
Цена: <span id="sel1">0</span> руб
<br>
Центральная смазка
<select name='sel2'>
 <option value='0'>Нет</option>
 <option value='23'>Да</option>
</select><br>
Цена: <span id="sel2">0</span> руб

<br>
Двойной подшипник
<select name='sel3'>
 <option value='0'>Нет</option>
 <option value='22'>Да</option>
</select><br>
Цена: <span id="sel3">0</span> руб
<br>
Общая стоимость выбранных позиций: <span id="sum">0</span> руб



</body>
</html>

<script type="text/javascript">
$(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы

$("select[name^='sel']").change(function() {
  var s = $('select[name^="sel"] option:selected').map(function() {
    return this.value;
  }).get()

  var sum = s.reduce((pv, cv) => {
    return pv + (parseFloat(cv) || 0);
  }, 0);

  $("span").each(function(i){
  	this.textContent = s[i];
  });

 $("#sum").text(sum.toLocaleString()); //Разделить разряды
});

Агрегат
<select name='sel1'>
 <option value='480'>Вал тип 1</option>
 <option value='556'>Вал тип 2</option>
</select><br>
Цена: <span id="sel1">0</span> руб <br>

Центральная смазка
<select name='sel2'>
 <option value='0'>Нет</option>
 <option value='23'>Да</option>
</select><br>
Цена: <span id="sel2">0</span> руб <br>


Двойной подшипник
<select name='sel3'>
 <option value='0'>Нет</option>
 <option value='22'>Да</option>
</select><br>
Цена: <span id="sel3">0</span> руб <br>

Общая стоимость выбранных позиций: <span id="sum">0</span> руб
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы

$("select[name^='sel']").change(function() {
    $("#"+ this.name).html((+this.value).toFixed(2));  
  var s = $('select[name^="sel"] option:selected').map(function() {
  
    return this.value
  }).get()

  var sum = s.reduce((pv, cv) => {
    return pv + (parseFloat(cv) || 0);
  }, 0);
 $("#sum").text(sum.toFixed(2)); //Разделить разряды
})
</script>

Спасибо большое!!! Очень выручили

Остановился на варианте Dilettante_Pro

Еще есть вопрос как к новой цене применить функцию разделения на разряды?

такой вариант не работает?

$("#"+ this.name).html(this.value.toLocaleString()); //Разделить разряды);

kk450,
toLocaleString -метод для форматирования дат. Для выделения дробной части можно использовать toFixed. Про разбивку по разрядам поищите на форуме - было.

Dilettante_Pro,
Да находил много разных способов поищу еще, а как правильно вставить отформатированную строку в данном случае?

Всмысле в вашем способе добавить .toLocaleString строке, потом найду более подходящий способ разбить на разряды (в моем случае дробей не будет, но спасибо за наводку)

Цитата:

Сообщение от kk450

а как правильно вставить отформатированную строку в данном случае?

если я правильно понял вопрос, то, например, так:

<span id="sel1">0</span> руб <br>
<script> 
var value = 556;
sel1.innerText = value.toFixed(2);
</script>

PS: изменил пример

Перечитал вопрос еще раз - похоже, неправильно понял. При разбивке на разряды число преобразуется в строку, которая потом и выводится в html
Разбить число на разряды

<span id="sel1">0</span> руб <br>
<script>
   var value = 3830000, str = value.toString(); 
   str = str.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 ');
   sel1.innerText = str;
</script>