Дублировать значение 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 строке, потом найду более подходящий способ разбить на разряды (в моем случае дробей не будет, но спасибо за наводку) |
Цитата:
<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> |
|
Цитата:
$(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы $("select[name^='sel']").change(function() { $("#"+ this.name).html(this.value); // КАК ТУТ ПРЕОБРАЗОВАТЬ СТРОКУ С РАЗДЕЛЕНИЕМ НА РАЗРЯДЫ??? 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.toLocaleString()); //Разделить разряды }) </script> |
kk450,
$("#"+ this.name).html((+this.value).toLocaleString()); // КАК ТУТ ПРЕОБРАЗОВАТЬ СТРОКУ С РАЗДЕЛЕНИЕМ НА РАЗРЯДЫ??? |
Агрегат <select name='sel1'> <option value='1480'>Вал тип 1</option> <option value='2556'>Вал тип 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(splitRange(+this.value)); 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(splitRange(sum)); //Разделить разряды }) function splitRange(val) { var str = val.toString(); return str.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); } </script> |
Dilettante_Pro,
Спасибо огромное! очень выручил |
Dilettante_Pro,
Задача еще усложнилась: Нужно добавить еще доставку, 2 вида (под ключи или до склада) выпадающие список ниже строки таблицы: <tr><td> Доставка и запуск под ключ</td> <td> <select name='dost1'> <option value='0'>Нет</option> <!-- в случае выбора этого пункта прибавить 0 к итогу --> <option value='3000'>Да</option> <!-- в случае выбора этого пункта, заблокировать dost2 прибавить 3000 к итогу --> </select></td> <td><span id="dost1">0</span>руб</td></tr> <tr><td> Доставка до склада</td> <td> <select name='dost2'> <option value='0'>Омск</option> <!-- value = 0% от sel1 --> <option value='1,5'>Новосибирск</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 1.5% от sel1 к итогу --> <option value='3'>Москва</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 3% от sel1 к итогу --> </select></td> <td><span id="dost2">0</span>руб</td></tr> В комментариях примерно расписал, выбор любого пункта кроме первого выключает dost2 и наоборот. Dilettante_Pro, помоги еще с этим плиз, и кинь в личку номер карты, закину на пиво |
Агрегат <select name='sel1'> <option value='1480'>Вал тип 1</option> <option value='2556'>Вал тип 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> руб<br><br> <table> <tr> <td>Доставка и запуск под ключ</td> <td> <select name='dost1'> <option value='0'>Нет</option> <!-- в случае выбора этого пункта прибавить 0 к итогу --> <option value='3000'>Да</option> <!-- в случае выбора этого пункта, заблокировать dost2 прибавить 3000 к итогу --> </select></td> <td><span id="dost1">0</span>руб</td></tr> <tr> <td>Доставка до склада</td> <td> <select name='dost2'> <option value='-1'>Нет</option> <option value='0'>Омск</option> <!-- value = 0% от sel1 --> <option value='1.5'>Новосибирск</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 1.5% от sel1 к итогу --> <option value='3'>Москва</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 3% от sel1 к итогу --> </select></td> <td><span id="dost2">0</span>руб</td> </tr> </table> <b>Итого с доставкой: <span id="result">0</span> руб<b> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var sum = 0, dost = 0; $(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы $("select[name^='sel']").change(function() { $("#"+ this.name).html(splitRange(+this.value)); var s = $('select[name^="sel"] option:selected').map(function() { return this.value }).get() sum = s.reduce((pv, cv) => { return pv + (parseFloat(cv) || 0); }, 0); $("#sum").text(splitRange(sum)); //Разделить разряды $('#result').text(splitRange(sum + dost)); }); var dost1 = $("select[name='dost1']"), dost2 = $("select[name='dost2']"), base = $("select[name='sel1'] option")[0].value; dost1.change(function() { if(this.value == '0') { // dost1.hide(); dost2.show(); } else { dost2.hide(); }; dost = +this.value; $("#"+ this.name).html(splitRange(dost)); $('#result').text(splitRange(sum + dost)); }); dost2.change(function() { if(this.value == '-1') { // dost2.hide(); dost1.show(); dost = 0; } else { dost1.hide(); dost =Math.round(base * (+this.value) / 100); }; $("#"+ this.name).html(splitRange(dost)); $('#result').text(splitRange(sum + dost)); }); function splitRange(val) { var str = val.toString(); return str.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); } function joinRange(val) { return val.replace(/\s/gi,''); }; </script> |
Dilettante_Pro,
доделал мальца, чтобы циферки в полях отображались Агрегат <select name='sel1'> <option value='1480'>Вал тип 1</option> <option value='2556'>Вал тип 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> руб<br><br> <table> <tr> <td>Доставка и запуск под ключ</td> <td> <select name='dost1'> <option value='0'>Нет</option> <!-- в случае выбора этого пункта прибавить 0 к итогу --> <option value='3000'>Да</option> <!-- в случае выбора этого пункта, заблокировать dost2 прибавить 3000 к итогу --> </select></td> <td><span id="dost1">0</span>руб</td></tr> <tr> <td>Доставка до склада</td> <td> <select name='dost2'> <option value='-1'>Нет</option> <option value='0'>Омск</option> <!-- value = 0% от sel1 --> <option value='1.5'>Новосибирск</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 1.5% от sel1 к итогу --> <option value='3'>Москва</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 3% от sel1 к итогу --> </select></td> <td><span id="dost2">0</span>руб</td> </tr> </table> <b>Итого с доставкой: <span id="result">0</span> руб<b> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var sum = 0, dost = 0; $(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы $("select[name^='sel']").change(function() { $("#"+ this.name).html(splitRange(+this.value)); var s = $('select[name^="sel"] option:selected').map(function() { return this.value }).get() sum = s.reduce((pv, cv) => { return pv + (parseFloat(cv) || 0); }, 0); $("#sum").text(splitRange(sum)); //Разделить разряды $('#result').text(splitRange(sum + dost)); }); var dost1 = $("select[name='dost1']"), dost2 = $("select[name='dost2']"); dost1.change(function() { if(this.value == '0') { dost1.hide(); dost2.show(); } else { dost2.hide(); }; dost = +this.value; $("#"+ this.name).html(splitRange(dost)); $('#result').text(splitRange(sum + dost)); }); dost2.change(function() { if(this.value == '-1') { dost2.hide(); dost1.show(); dost = 0; } else { dost1.hide(); dost =Math.round(sum * (+this.value) / 100); }; $("#"+ this.name).html(splitRange(+dost)); $('#result').text(splitRange(sum + dost)); }); function splitRange(val) { var str = val.toString(); return str.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); } function joinRange(val) { return val.replace(/\s/gi,''); }; </script> |
j0hnik,
:thanks: Да, про поля я забыл:( |
А какой код нужен чтобы при выборе любого пункта кроме НЕТ второй способ доставки изчезал, но при возврате НЕТ чтобы второй способ появлялся, и наоборот
Иными словами на данный момент если хотябы раз после загрузки страницы был выбран любой вариант кроме НЕТ. То оба селекта одновременно не отображают НЕТ |
kk450,
Убрать строки 72 и 83 - нумерация по примеру пост№16 |
Dilettante_Pro,
сей стоимость dost2 формируется на основе выбранных опций (sum),а нужно чтобы была прямая процентная привязка к sel1 (там будет наименование) помогите еще с этим плиз |
Внес изменения в Пост№16 - в т.ч. добавления от j0hnik
|
спасибо пробую
|
А можно ли как то сделать чтобы коэффициент базовой стоимости брался не из выбранного sel1, а из его первого пункта, независимо какой выбран на данный момент.
например значения sel1 100|Вал тип 1 110|Вал тип 2 Доставку до склада мы будем делать по цене самого первого элемента Вал тип 1, следовательно стоимость доставки будет рассчитываться от 100. Если мы выберем Вал тип 2 стоимость доставки до склада не изменится Или проще прописывать коэффициент как константу? |
Цитата:
|
Ребята опять печаль беда ))
Возникла необходимость привязки sel1 к dost1 выяснилось что у каждого товара должно быть 2 цены, не связанных между собой: 1. Основная цена 2. цена с доставкой, монтажем, гарантией Так получаем что то вроде: Наименование / Цена / Цена с доставкой, монтажем, гарантией Вал / 100 рублей / 120 рублей Шестерня / 40 рублей / 48 рублей ... Получается dost1 для вала будет иметь значение 20 рублей (120-100=20) при загрузке страницы надо будет рассчитывать эту стоимость для первого элемента sel1 и менять при изменении sel1 Все заморочилось так что то... наверно для sel1 проще массив создать как думаете? или как-то еще можно хранить второе значение? |
Цитата:
Тут уж вам виднее как это предлагается, либо отдельно цена услуг, либо наценка товара за услуги. Но эта цена рассчитывается по базовой цене товара и известных цен за услуги. Это может быть и набор флажков имеющих в значениях цены услуг. А выбор флажков, это цена товара плюс цена выбранной услуги. |
Парни скажите плиз можно сделать такое?
|
laimas,
Я видимо не так выразился или вы не так поняли... имел ввиду логику наценки например: Вал тип 1 / 100руб / 150руб Вал тип 2 / 120руб / 200руб Получается что цена за доставку и установку 50руб для Вала1, а для Вала2 80 рублей. Нет логики увеличения цены за доставку и установку. У каждого товара она своя |
Цитата:
Цитата:
Если сервер хранит цену за товар, за его доставку и установку, делайте при выводе товаров как хотите - рассчитывая сразу на сервере цены и предлагая их для выбора или предлагайте выбор услуг (доставка, установка) на клиенте, рассчитывая цену. Вам чего надо, совета как поступить? Ну так это не форуму решать. |
Вот такие костыли:cray:
Агрегат <select name='sel1'> <option value='1480' data-dost='50'>Вал тип 1</option> <option value='2556' data-dost='80'>Вал тип 2</option> </select><br> Цена: <span id="sel1">0</span> руб <br> Центральная смазка <select name='sel2'> <option value='0' data-dost='0'>Нет</option> <option value='23' data-dost='0'>Да</option> </select><br> Цена: <span id="sel2">0</span> руб <br> Двойной подшипник <select name='sel3'> <option value='0' data-dost='0'>Нет</option> <option value='22' data-dost='0'>Да</option> </select><br> Цена: <span id="sel3">0</span> руб <br> Общая стоимость выбранных позиций: <span id="sum">0</span> руб<br><br> <table> <tr> <td>Доставка и запуск под ключ</td> <td> <select name='dost1'> <option value='0'>Нет</option> <!-- в случае выбора этого пункта прибавить 0 к итогу --> <option value='-0'>Да</option> <!-- в случае выбора этого пункта, заблокировать dost2 прибавить 3000 к итогу --> </select></td> <td><span id="dost1">0</span>руб</td></tr> <tr> <td>Доставка до склада</td> <td> <select name='dost2'> <option value='-1'>Нет</option> <option value='0'>Омск</option> <!-- value = 0% от sel1 --> <option value='1.5'>Новосибирск</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 1.5% от sel1 к итогу --> <option value='3'>Москва</option> <!-- в случае выбора этого пункта, заблокировать dost1 и прибавить 3% от sel1 к итогу --> </select></td> <td><span id="dost2">0</span>руб</td> </tr> </table> <b>Итого с доставкой: <span id="result">0</span> руб<b> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript"> var sum = 0, dost = 0, dostA = 0, base = 0; var dost1 = $("select[name='dost1']"), dost2 = $("select[name='dost2']"); $(document).ready(function(){ $("select[name^='sel']").trigger('change'); }); //Установить цену при загрузке страницы $("select[name^='sel']").change(function() { if(this.name == 'sel1') base = +this.value; $("#"+ this.name).html(splitRange(+this.value)); dostA = 0; var s = $('select[name^="sel"] option:selected').map(function() { dostA += +this.dataset.dost; return this.value; }).get(); dost1.change(); dost2.change(); sum = s.reduce((pv, cv) => { return pv + (parseFloat(cv) || 0); }, 0); $("#sum").text(splitRange(sum)); //Разделить разряды $('#result').text(splitRange(sum + dost)); }); dost1.change(function() { if(this.value == '0') { // dost1.hide(); dost2.show(); } else { dost2.hide(); }; dost = this.value; dost = dost=='0'?0:dostA; $("#"+ this.name).html(splitRange(dost)); $('#result').text(splitRange(sum + dost)); }); dost2.change(function() { if(this.value == '-1') { // dost2.hide(); dost1.show(); dost = 0; } else { dost1.hide(); dost =Math.round(base * (+this.value) / 100); }; $("#"+ this.name).html(splitRange(dost)); $('#result').text(splitRange(sum + dost)); }); function splitRange(val) { var str = val.toString(); return str.replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1 '); } function joinRange(val) { return val.replace(/\s/gi,''); }; </script> |
Dilettante_Pro,
если представить данные нормально, то костыли не потребуются. ) |
laimas,
Кто бы спорил.... |
Dilettante_Pro,
Блин дружище, ты не представляешь как выручил. Спасибо! laimas, Идеалу нет предела ))) Любое решение имеет право на жизнь, если оно работает ) |
Цитата:
|
laimas,
А вы бы как сделали? в данном случае? |
Dilettante_Pro,
<select name='dost1'> <option value='0'>Нет</option> <option value='0'>Да</option> </select> Так и задумано? первичное значение записываем руками? upd: оказывается проблема еще глубже - если у значения у dost1 вариант ДА уже есть значение то оно суммируется например в data-dost мы указали 5, а по умолчанию было 2 то получится 7. Хотя должно быть 5 а если по умолчанию у dost1 Значение ДА value мы ставим 0, то далее эта опция не учитывается |
Цитата:
|
laimas,
Давайте с самого начала: нужна форма которая суммирует: стоимость товара + дополнительные опции + доставку Наименование: Вариант 1. Вал коленчатый (производство Россия) - базовая цена1 100руб / цена2 с доставкой и установкой - 130руб Вариант 2. Вал коленчатый (производство Беларусь) - базовая цена1 80руб / цена2 с доставкой и установкой - 125руб Опция 1 (вкладыши коренные): Вариант 1. Нет - прибавить 0руб Вариант 2. Вкладыши производство Россия - прибавить 35руб Вариант 3. Вкладыши производство Беларусь - прибавить 30руб Опция 2 (вкладыши шатунные): Вариант 1. Нет - прибавить 0руб Вариант 2. Вкладыши производство Россия - прибавить 20руб Вариант 3. Вкладыши производство Беларусь - прибавить 18руб Доставка двух видов ____________________________________ Доставка + Запуск + Гарантия (Тип 1) Вариант 1. Нет <!-- прибавить к общей сумме 0 (ноль) + Доставку тип 2 если отключена включить --!> Вариант 2. Да <!-- вместо базовой цены1 прибавить цену2 + Доставку тип 2 отключить --!> Доставка до склада (Тип 2) Вариант 1. Омск (основной склад) <!-- прибавить к общей сумме 0 (ноль) + Доставку тип 1 если отключена включить --!> Вариант 2. Москва <!-- прибавить к общей сумме 1% от базовой цены текущего товара + Доставку тип 1 отключить --!> Вариант 3. Питер <!-- прибавить к общей сумме 2% от базовой цены текущего товара + Доставку тип 1 отключить --!> |
Цитата:
|
Часовой пояс GMT +3, время: 06:37. |