计算选择多个中的金额,隐藏一些元素



有一个形式,我写了一个脚本来计算选择中的总和,但它不计算多选中的金额,只计算一个选定的选项,如果不计算更多,请告诉我。 请问这个问题如何解决

还有如何隐藏某些元素的问题,也就是说,如果在选择"sel"中选择了选项<option> 4 cylinders </option>,则在选择"sel1"中仅保留注释之间的内容<! - 4 cylinders-- > <! - end 4 cylinders ->,并在选择"sel1"中隐藏其他所有内容

<div class="cf-left-col">
<div class="form-group">
<select class="input-md form-control" id="sel">
<option>Выберите количество цилиндров</option>
<option>4 цилиндра</option>
<option>6 цилиндров</option>
<option>8 цилиндров</option>
<option>ГАЗель</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel1">
<option>Выберите оборудование</option>
<!--4 цилиндра-->
<option value="13000">OMVL SAVER-4 (Италия) - Лидер продаж в РФ</option>
<option value="11700">Digitronic – (Польша)</option>
<option value="7000">Atiker (Турция) – бюджетный комплет оборудования</option>
<option value="12400">BRC- (Италия), Оборудование премиум класса)</option>
<!--end 4 цилиндра-->
<!--6 цилиндра-->
<option value="17500">OMVL -6 (Италия), Лидер продаж в РФ</option>
<option value="20800">OMVL -6 OBD (Италия) , Премиум линейка</option>
<option value="28400">BRC- (Италия), Оборудование премиум класса</option>
<!--8 цилиндра-->
<option value="23000">OMVL -8 OBD (Италия) - Премиум линейка</option>
<option value="33600">BRC- (Италия), Оборудование премиум класса</option>
</select>
</div>
<div class="form-group">
<select class="input-md form-control" id="sel2">
<option>Выберите объем баллона</option>
<option value="11275.29">Баллон (Метан) 50 л (219*1640) мм</option>
<option value="29055.90">Баллон (Метан) 100 л( 425*1000) мм</option>
<option value="25876.38">Баллон (Метан) 90 л (425*940) мм</option>
<option value="4240.00">Баллон цилиндрический 100 л (399*895)</option>
<option value="4310.00">Баллон 100 л (400*912)</option>
<option value="4240.00">Баллон 103 л (356*1110) </option>
<option value="4100.00">Баллон 105 л (376*1064)</option>
<option value="4360.00">Баллон 130 л (399*1144) </option>
<option value="4590.00">Баллон 130 л (400*1165)</option>
<option value="7550.00">Баллон цилиндрический 200 л (498*1136) </option>
<option value="2070.00">Баллон цилиндрический 35 л (241*880)</option>
<option value="2520.00">Баллон цилиндрический 50 л (299*798) </option>
<option value="2460.00">Баллон цилиндрический 50 л (300*796)</option>
<option value="3240.00">Баллон цилиндрический 51 л (356*600) </option>
<option value="2770.00">Баллон цилиндрический 60 л (299*948) </option>
<option value="3070.00">Баллон цилиндрический 60 л (315*863) </option>
<option value="2630.00">Баллон цилиндрический 60 л (300*945)</option>
<option value="3000.00">Баллон цилиндрический 60 л (315*866)</option>
<option value="2840.00">Баллон цилиндрический 65 л (299*1023) </option>
<option value="4150.00">Баллон цилиндрический 80 л (356*900) </option>
<option value="3520.00">Баллон тор внешняя горловина 42 л НЗГА (600*200)</option>
<option value="5900.00">Баллон тор внешняя горловина 50 л (650*200) </option>
<option value="4100.00">Баллон тор внешняя горловина 54 л НЗГА (630*220)</option>
<option value="4710.00">Баллон тор внешняя горловина 60 л (630*250)</option>
<option value="7550.00">Баллон тор внешняя горловина 62 л (720*210) </option>
<option value="7500.00">Баллон тор внешняя горловина 74 л (720*230) </option>
<option value="7900.00">Баллон тор внешняя горловина 81 л (720*250) </option>
<option value="8350.00">Баллон тор внешняя горловина 98 л НЗГА (720*300)</option>
<option value="3540.00">Баллон тор внутр. горловина 42 л НЗГА (600*200)</option>
<option value="3990.00">Баллон тор внутр. горловина 47 л (600*220) </option>
<option value="3730.00">Баллон тор внутр. горловина 53 л (630*225) </option>
<option value="6620.00">Баллон тор внутр. горловина 54 л НЗГА (720*180)</option>
<option value="6210.00">Баллон тор внутр. горловина 55 л (650*225) </option>
<option value="8100.00">Баллон тор полнотелый 85 л (720*250) </option>
<option value="8300.00">Баллон тор полнотелый 93 л (720*270) </option>
<option value="8300.00">Баллон тор полнотелый 94 л (720*270) </option>
</select>
</div>
</div>
<div class="cf-right-col">
<div class="form-group">
<select multiple class="form-control" id="sel3">
<option value="300">ВЗУ</option>
<option value="1000">Сенсор уровня газа</option>
<option value="1500">Евромультиклапан</option>
<option value="1500">Обтяжка карпетом</option>
<option value="500">Доп фильтр тонкой очистки</option>
</select>
</div>
<div class="form-tip pt-20">
<i class="fa fa-info-circle"></i> Для множественного выбора зажмите клавишу CTRL
</div>
</div>

我的书面处理程序

function GetData() {
var s = $('select').change(function() {
var sum = 0;
s.each(function() {
sum += Number(this.value) || 0;
});
//$("#sum").html(sum);
document.getElementById('result').innerHTML = "Примерная стоимость установки: " + sum;
console.log(sum);
});
}

我认为问题是每次在选择时触发change事件时,都会在change回调函数中定义sum变量并将其分配给零,我建议将此变量移动到外部GetData范围:

function GetData() {
var sum = 0;
var s = $('select').change(function() {
s.each(function() {
sum += Number(this.value) || 0;
});
console.log(sum);
});
}

关于另一个问题,您可以向id=sel选择元素添加一个处理程序,该元素将获取其值,然后将数据属性(data-group(添加到所有具有组ID的选项元素中。 在处理程序中sel,您将查询具有组值的所有元素document.querySelectorAll('option[data-group="+ group_id +"]')group_id该值将在sel中设置为选项值,并隐藏所有元素(el.style.display = 'none'(

我希望这有所帮助

最新更新