javascript - onclick超文本链接显示选择选项

Question

我希望脚本在 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>

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>