如何在JavaScript中结合条件判断，通过select onchange返回对应HTML代码

你当前的实现存在两个完全跑不通的逻辑断点，根本达不到动态渲染的效果：

• 浏览器根本不会处理onchange事件回调函数的返回值。哪怕你在函数里拼好了完整的HTML字符串，没有手动写代码把它插到DOM里，页面不会有任何变化——你写的return只是把字符串返回给了浏览器的事件处理器，没人接这个值，自然不会渲染
• 你把整个select元素当参数传进去做条件判断时，DOM元素本身和数字/字符串1、2的比较永远匹配不上，哪怕分支逻辑写对了，也根本触发不了

1. 预留动态渲染的DOM容器 #

在原来的主选择框同级位置，加一个空的div作为动态表单的挂载点，给它设置唯一id，用来承接后续生成的内容：

<!-- 原有的主选择框 -->
<select onchange="getval(this)">
  <option value="none" selected>请选择查询维度</option>
  <option value="1">Blood Group</option>
  <option value="2">Donor name</option>
</select>
<!-- 新增的动态渲染容器 -->
<div id="dynamic-form-wrapper" style="margin-top: 16px;"></div>

2. 重写getval函数的DOM操作逻辑 #

把原来只返回HTML字符串的写法，改成拿到对应内容后直接写入容器，同时处理好不同选项的切换状态：

function getval(selectElement) {
  // 先拿到挂载容器，每次切换先清空旧内容，避免多个表单叠加
  const formWrapper = document.getElementById('dynamic-form-wrapper');
  formWrapper.innerHTML = '';
  // 从传入的select元素上取当前选中的value，不要直接拿DOM对象做判断
  const selectedOptionValue = selectElement.value;

  // 按选中的选项生成对应表单内容
  if (selectedOptionValue === '1') {
    // 选中Blood Group：渲染血型选择下拉框
    formWrapper.innerHTML = `
      <label>选择血型：</label>
      <select name="bloodGroup" required>
        <option value="">请选择</option>
        <option value="A">A型</option>
        <option value="B">B型</option>
        <option value="AB">AB型</option>
        <option value="O">O型</option>
      </select>
    `;
  } else if (selectedOptionValue === '2') {
    // 选中Donor name：渲染姓名文本输入框
    formWrapper.innerHTML = `
      <label>输入捐赠人姓名：</label>
      <input type="text" name="donorName" placeholder="请输入完整姓名" required>
    `;
  }
  // 选中默认none时，因为已经提前清空了容器，不需要额外处理
}

• 动态生成的表单元素一定要设置name属性，否则后续表单提交时无法获取对应输入的值
• select的value永远是字符串类型，判断时要注意类型匹配，避免因为隐式转换导致分支失效
• 插入DOM后如果需要给动态元素加校验、提交触发逻辑，要在写入容器后单独绑定事件，不要依赖函数返回值处理交互

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