如何使用 select 显示隐藏的输入框

Question

我正在尝试使用 select 来显示隐藏的输入字段。使用选项 2 我想显示输入字段，使用选项 1 我想再次隐藏它。

有人知道我需要在代码中更改什么吗？

提前致谢

function showFooField() {
            document.getElementById("nameFoo").style.display = "block";
        }

#nameFoo {
  display:none;
}

 <select onchange="showFooField()" name="foo" id="foo" class="form-control">
             <option value="1" selected>1</option>
             <option value="2">2</option>
  </select>
  
    <div id="nameFoo">
        <input id="name" required />
     <div>

Answer 1

您在更改显示之前没有测试该值。

我会使用 class 和切换

window.addEventListener("load", () => { // when the page loads
  document.getElementById("foo").addEventListener("change", function() {
    document.getElementById("nameFoo").classList.toggle("hide", this.value === "1")
  })
})

.hide {
  display: none;
}

<select name="foo" id="foo" class="form-control">
  <option value="1" selected>1</option>
  <option value="2">2</option>
</select>

<div id="nameFoo" class="hide">
  <input id="name" required />
</div>

Answer 2

运行检查 select 值，您可以从那里操纵样式

const el = document.getElementById("foo");
const inputEl = document.getElementById("nameFoo");
el.addEventListener("change", function() {
  if (this.value === "1") {
    inputEl.style.display = "none";
  }
  else {
    inputEl.style.display = "block";
  }
});

<select name="foo" id="foo" class="form-control">
  <option value="1" selected>1</option>
  <option value="2">2</option>
</select>

<div id="nameFoo" style="display: none">
  <input id="name" required />
<div>

如何使用 select 显示隐藏的输入框

How to display a hidden inputfield with select

html

javascript

css

html-select