现有单选框显示逻辑，求下拉框选择显示/隐藏输入值的实现方案

你可以通过监听下拉框的change事件，根据选中选项的内容来控制目标元素的显示与隐藏，以下是具体实现代码：

HTML 结构 #

先添加下拉框元素，同时保留你已有的用于显示内容的<p>标签：

<!-- 下拉框 -->
<select id="selectBox" onchange="handleSelectChange(this)">
  <option value="">请选择</option>
  <option value="选项1">选项1</option>
  <option value="选项2">选项2</option>
  <option value="选项3">选项3</option>
</select>

<!-- 用于显示选中值的元素 -->
<p id="acc" class="font-medium text-white"></p>

JavaScript 逻辑 #

实现处理下拉框变化的函数，逻辑和你单选框的思路类似，判断选中值是否有效来控制显示内容：

function handleSelectChange(select) {
  // 获取选中选项的值，若为空则清空内容（隐藏），否则赋值显示
  var selectedValue = select.value ? select.value : '';
  document.getElementById("acc").innerHTML = selectedValue;
}

进阶隐藏逻辑（可选） #

如果需要直接控制元素的显示/隐藏状态（而非仅清空内容），可以修改函数为：

function handleSelectChange(select) {
  var targetEl = document.getElementById("acc");
  if (select.value) {
    targetEl.innerHTML = select.value;
    targetEl.style.display = "block"; // 显示元素
  } else {
    targetEl.innerHTML = "";
    targetEl.style.display = "none"; // 隐藏元素
  }
}

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