如何通过select下拉选择器控制隐藏input输入框的显示与隐藏

需要修改的内容如下： #

1. 调整JavaScript逻辑

现有函数只会固定展示输入框，需要增加下拉框选中值的判断逻辑，修改后代码：

function showFooField() {
  // 获取下拉框当前选中的值
  const selectedValue = document.getElementById("foo").value;
  const fooField = document.getElementById("nameFoo");
  const nameInput = document.getElementById("name");
  if (selectedValue === "2") {
    fooField.style.display = "block";
    nameInput.required = true;
  } else {
    fooField.style.display = "none";
    nameInput.required = false;
    // 可选：隐藏时清空输入框已填内容
    nameInput.value = "";
  }
}

2. 修复HTML标签错误

现有代码里#nameFoo的闭合标签写错了，会导致DOM结构解析异常，修改后完整HTML部分：

<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>

CSS部分不需要做修改，保持原有代码即可。 #

内容的提问来源于stack exchange，提问作者blackplan