Question

我正在 javascript 中开发一个函数，该函数应该根据下拉列表中的选定值显示/隐藏 div。

function hide_show() {
  document.addEventListener("DOMContentLoaded",init);

  function init() {
    document.querySelector('select#b2borprivate').addEventListener('click')=hide_show;
  }
  var zone = document.querySelector('select[name="b2borprivate"]')
  if (zone.value == "osoba_prywatna"){
    alert("test1");

    var x = document.getElementById("private_person");

    if (x.style.display === "none") {
      alert("test2");
      x.style.display = "block";
    } else {
    }
  }
}

<div class="row">
  <div class="col">
    <label for="b2borprivate"><b>Osoba prywatna / Firma</b></label>
    <select class="form-control" id="b2borprivate" name="b2borprivate" onchange="hide_show()" required>
      <option value="">Wybierz</option>
      <option value="osoba_prywatna">Osoba prywatna</option>
      <option value="firma">Firma</option>
    </select>
  </div>
  <div class="col">
  </div>
</div>

警报可以成功显示，因此第一个条件有效。问题是关于 display.none 的第二个条件。它不起作用。

Answer 1

当使用 getElementById 获取任何标签时，不能直接访问它，我们需要使用它的第 0 个索引来访问它。

您应该将其更新为： var x = document.getElementById("private_person")[0];

Answer 2

谢谢，我只是用 jquary 修复它

Answer 3

PrivatePerson 是一个数组，应该通过索引访问

示例

document.getElementById('private_person')[0]

根据下拉值显示/隐藏 div

3 个答案: