javascript - 当三个下拉列表的总和大于 300 时显示 div
问题描述
我不知道如何找出我的问题。我有三个选择器(下拉菜单),当这三个列表的总和大于 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 "Logo zdarma"</label></div>
有人可以帮助我吗?请 :)
解决方案
有多个select
相同id
的。id
必须是独一无二的。所以你可以使用class
.
创建两个函数,其中一个将向change
每个 select 添加事件,因此每当 select 更改时,该函数将触发,并且在另一个函数中,每次 select 更改都从每个 select 元素中获取值,并对这些值进行求和以显示/隐藏 div
const showDiv = document.getElementById('show300');
const elem = document.querySelectorAll('.custom-select1');
calculateTotal = () => {
let total = 0;
elem.forEach((item) => {
total += parseInt(item.value, 10);
});
total > 300 ? showDiv.classList.add('show') : showDiv.classList.remove('show')
}
elem.forEach((item) => {
item.addEventListener('change', calculateTotal)
})
.hide {
display: none;
}
.show {
display: block;
}
<div class="input-group-inzerat">
<select name="Produkt 1" class="custom-select1">
<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">
<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">
<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 hide" 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 "Logo zdarma"</label></div>
推荐阅读
- netcdf4 - 使用 cdo 将通用网格类型转换为 lonlat 网格类型
- android-emulator - 在安装颤振应用程序时,我在 Genymotion 模拟器中收到本机代码 x86 错误
- javascript - ReactJS:变量中的 ReactDOM.Render()?
- amazon-s3 - 参数验证失败:\n无效的存储桶名称\“\”:存储桶名称必须与正则表达式匹配 [JMeter]
- python - 中断命令不会停止循环
- sql-server-2016 - Coldfusion cfqueryparam - 改变编码?
- python - 强制 requests.get 在 python 中使用没有百分比编码的方括号
- javascript - 如何向下滚动到隐藏部分
- python - 使用 gzip.open() 编写的 Python 3 无法将压缩文件上传到云存储
- javascript - 如何从这些对象中获取值