单击超文本链接显示选择选项

Question

我希望脚本在单击超文本链接时加载选择选项 我正在使用 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>

Answer 1

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>