javascript - onclick 超文本链接显示选择选项
问题描述
我希望脚本在 onClick 超文本链接时加载选择选项 我正在使用 onclick 处理程序在单击超文本链接后加载选择选项,但没有任何反应。您可以在下面看到我的代码示例:
function toggleTables(which) {
if (which == "greenhouse") {
document.getElementById('greenhouseselect').style.display = "block";
document.getElementById('nethouseselect').style.display = "none";
document.getElementById('sprinklerselect').style.display = "none";
}
if (which == "nethouse") {
document.getElementById('greenhouseselect').style.display = "none";
document.getElementById('nethouseselect').style.display = "block";
document.getElementById('sprinklerselect').style.display = "none";
}
if (which == "sprinkler") {
document.getElementById('greenhouseselect').style.display = "none";
document.getElementById('nethouseselect').style.display = "none";
document.getElementById('sprinklerselect').style.display = "block";
}
}
<div class="row">
<input type="checkbox" name="" value="greenhouse"><a href="#">Green House</a>
<input type="checkbox" name="" value="nethouse"><a href="#">Net House</a>
<input type="checkbox" name="" value="sprinkler"><a href="#">Sprinkler</a>
</div><br>
<div class="row">
<div>
<select id="greenhouseselect">
<option value="310000">8 x 30 @ 310,000Ksh - Locally Fabricated</option>
</select>
</div><br>
<div>
<select id="nethouseselect">
<option value="170000"> 8 x 15 @ 170,000Ksh - Locally Fabricated</option>
</select>
</div><br>
<div>
<select id="sprinklerselect">
<option value="50000">Movable Systems 1 Acre @ 50,000 </option>
</select>
</div><br>
</div>
解决方案
function toggleTables(el) {
if (el.tagName == 'A') {
el = el.previousElementSibling;
el.checked = el.checked ? 0 : 1; // strange bug != el.checked did not worked here
}
var others = el.parentElement.children, el2;
for (var clearEm = 0; clearEm < others.length; clearEm++) {
var eli = others[clearEm];
if (eli.tagName == "INPUT" && eli != el) eli.checked = false;
}
var selection = "greenhouse|nethouse|sprinkler".split('|');
for (var n in selection) {
document.getElementById(selection[n]+"select").style.display =
(el.value == selection[n] && el.checked) ? "block" : "none";
}
}
select {
display:none;
}
<div class="row" onclick="toggleTables(event.srcElement)">
<input type="checkbox" name="" value="greenhouse"><a href="#">Green House</a>
<input type="checkbox" name="" value="nethouse"><a href="#">Net House</a>
<input type="checkbox" name="" value="sprinkler"><a href="#">Sprinkler</a>
</div><br>
<div class="row">
<select id="greenhouseselect">
<option value="310000">8 x 30 @ 310,000Ksh - Locally Fabricated</option>
</select>
<select id="nethouseselect">
<option value="170000" > 8 x 15 @ 170,000Ksh - Locally Fabricated</option>
</select>
<select id="sprinklerselect">
<option value="50000">Movable Systems 1 Acre @ 50,000 </option>
</select>
</div>
推荐阅读
- javascript - 在多选中更改时在选择中附加选项
- javascript - 使用Javascript/jQuery动态改变outerHeight而不刷新页面
- excel - 使用 vba 命名单元格和范围的 excel 更新参考
- vaadin - Vaadin Accordion with Button 总结
- python-3.x - Mysql with python:utf8编码的问题
- angular - Nrwl DataPersistence Fetch 函数不会使用 AngularFiresotre stateChange() 函数触发运行函数
- ruby - 在引号“”中调用函数
- google-chrome - Chrome/Selenium:use-file-for-fake-video-capture 不再工作
- python-3.x - 在变量中获取 Scrapy 蜘蛛的结果
- firebase - Flutter Firestore 获取地图并从中生成对象