当三个下拉菜单的总和大于300时显示div

Question

我不知道如何解决我的问题。我有三个选择器（下拉列表），当这三个列表的总和大于300时，应该显示一个带复选框的div。这是我的表格，当客户想要订购300多种产品时，他可以免费获得一些东西。我可以在输入中获得这些列表的总和，但是此输入的值未显示，因此我无法使用它来显示div：

//this is not working
Event.observe('total', 'keyup', function () {
     if ($$('#total]')[0].value > 299){
         $$('#show300')[0].show();
     }
     else{
         $$('#show300')[0].hide();
     }
}); 
    
 

<div class="input-group-inzerat"><select name="Produkt 1" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 2" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 3" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>

<input type="text" name="total" id="total" style="display: block" />

<div class="form-check" id="show300" ><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku &quot;Logo zdarma&quot;</label></div>

有人可以帮我吗？请：）

Answer 1

select中有多个id。 id必须是唯一的。因此您可以使用class。