<select id="goods" size="4">
<option value="-">--</option>
<option value="203" data-id="1">молоко</option>
<option value="30" data-id="2">ананас</option>
<option value="40" data-id="3">яблоко</option>
</select>
<br>
Сумма: <span id="summ">0</span> рублей<br>
Было выбрано:<br>
<span id="list"></span>
<br><br>
<select id="good" size="4">
<option value="-">--</option>
<option value="203" data-id="1">пп</option>
<option value="30" data-id="2">ррр</option>
<option value="40" data-id="3">яблокоrew</option>
</select>
<br>
Сумма: <span id="summ_two">0</span> рублей<br>
Было выбрано:<br>
<span id="list_two"></span>
<br><br>
<select id="ool" size="4">
<option value="-">--</option>
<option value="203" data-id="1">2око</option>
<option value="30" data-id="2">2анас</option>
<option value="40" data-id="3">2локо</option>
</select>
<br>
Сумма: <span id="olo">0</span> рублей<br>
Было выбрано:<br>
<span id="list_olo"></span>
<br><br>
общая сумма: <span id="ob_summ">0</span> рублей
const allPrice = document.getElementById('ob_summ');
const selects = document.querySelectorAll('select');
const updatePrices = () => {
let price = 0;
for (const select of selects) {
const value = parseInt(select.value);
if (value > 0) price += value;
}
allPrice.innerText = price;
}
for (const select of selects) {
select.onchange = updatePrices;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.