如何根据下拉框选中值动态显示不同type的input输入框

你写的代码存在几个明显错误，导致功能无法正常运行：

• 脚本第一行存在语法错误：v var chkmale 多写了一个无效字符v，JS解析直接报错，后续逻辑根本不会执行
• 状态判断逻辑错误：checked是复选框、单选按钮的专属属性，下拉选择框<select>的选中状态不能通过子选项的checked判断，<option>标签本身不存在这个属性
• 输入框类型不符合需求：你写的两个输入框type都是date，第二个日期时间输入框需要用原生标准的datetime-local类型（旧的datetime类型已经被HTML标准废弃，所有现代浏览器都不支持）
• 缺少互斥逻辑：就算判断逻辑正确，切换选项时也没有把上一个显示的输入框隐藏，会出现两个输入框同时显示的问题

JS逻辑代码 #

function changeFunc() {
  // 获取下拉框和两个输入容器元素
  const selectEl = document.getElementById("a");
  const dateInputWrap = document.getElementById("dvtext");
  const datetimeInputWrap = document.getElementById("dvtext1");
  // 先默认隐藏两个输入容器
  dateInputWrap.style.display = "none";
  datetimeInputWrap.style.display = "none";
  // 根据下拉框选中值显示对应输入框
  if (selectEl.value === "Male") {
    dateInputWrap.style.display = "block";
  } else if (selectEl.value === "Female") {
    datetimeInputWrap.style.display = "block";
  }
}

HTML结构代码 #

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <h2>Add detail</h2>
    </div>
    <div class="modal-body">
      <form>
        <label for="gender">Gender: </label>
        <select id="a" onchange="changeFunc();">
          <option value="">Select</option>
          <option name="gender" value="Male">Male</option>
          <option name="gender" value="Female">FeMale</option>
        </select>
        <br>
        <br>
        <div id="dvtext" style="display: none">
          选择日期:
          <input type="date">
        </div>
        <div id="dvtext1" style="display: none">
          选择日期时间:
          <input type="datetime-local">
        </div>
        <div class="alert-msg" style="text-align: center;"></div>
        <br>
        <input type="reset" />
      </form>
    </div>
  </div>
</div>
<div class="container">
  <div class="col-lg-12">
  </div>
</div>

• 给下拉框默认的「Select」选项加了空value，避免页面加载时默认选中第一个有效选项的问题
• 移除了option标签上多余的id属性，下拉框选中状态直接通过select元素的value属性判断即可，不需要额外获取option元素
• 每次触发选择变化时先重置两个输入容器的隐藏状态，保证同一时间只会显示一个输入框
• 日期时间输入框用标准的datetime-local类型，可以直接调起浏览器原生的日期时间选择组件，不存在兼容性问题

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