javascript - 在下拉选择值显示隐藏的输入字段

Question

这肯定已经被覆盖过，我相信它会再次出现，但我发现的例子都没有帮助我。

I have a dropdown field, when option 2(Admin) is selected i want to display a text input type that is otherwise hidden.

const ac = document.getElementById("admin_code");
ac.style.display = "none";

function toggleDropdown(selObj){
  ac.style.display = selObj.value === "Admin" ? "block" : "none";
}

<label>User Type:</label> <select id="userType" name="userType" id="userType" onchange='toggleDropdown(this);' required>
<option value="" selected>Select User Type</option>
<option value="Client">Client</option>
<option value="Admin">Admin</option>
<option value="Staff">Staff</option>
</select>
<br>
<div id="admin_code">
<label>Person Code:</label> <input type="text" name="adminCode" 
id="adminCode" placeholder="000001">
</div>

目前，当我从一开始就在我的 admin_code div 上显示此页面时。我尝试将 style.display 值都更改为 none 以查看它是否被调用，但似乎不是。

标签： javascripthtml

Answer 1

this将关键字传递给您的回调函数：

const ac = document.getElementById("admin_code");
ac.style.display = "none";

function toggleDropdown(selObj) {
  ac.style.display = selObj.value === "Admin" ? "block" : "none";
}

<label>User Type:</label>
<select id="userType" name="userType" id="userType" onchange='toggleDropdown(this);' required>
  <option value="" selected>Select User Type</option>
  <option value="Client">Client</option>
  <option value="Admin">Admin</option>
  <option value="Staff">Staff</option>
</select>
<br>
<div id="admin_code">
  <label>Admin Code:</label> <input type="text" name="adminCode" id="adminCode">
</div>