本教程详细讲解如何利用纯javascript实现表单字段的动态显示与生成。通过监听`select`下拉菜单的`onchange`事件，我们能够根据用户的选择实时调整表单中输入字段的数量。文章将涵盖html结构准备、javascript逻辑编写以及关键注意事项，旨在帮助开发者构建交互性更强的动态表单。

在现代Web应用中，为了提升用户体验和表单的灵活性，常常需要根据用户的实时选择来动态地显示或隐藏特定的表单元素，甚至动态生成新的输入字段。例如，一个订单系统可能根据用户选择的产品数量，动态生成相应数量的产品详情输入框。这种交互模式避免了显示所有可能字段的冗余，使界面更加简洁直观。

实现原理：onchange 事件与 DOM 操作

实现表单字段动态显示的核心在于以下两点：

1. onchange 事件监听： 当用户更改 元素的选项时，会触发 onchange 事件。我们可以将一个 JavaScript 函数绑定到这个事件上，以便在选择发生变化时执行相应的逻辑。
2. DOM 操作： 在 JavaScript 函数中，我们将根据选中的值来操作文档对象模型（DOM）。这通常包括：
   • 获取 元素当前选中的值。
   • 清空旧的动态生成区域（如果存在）。
   • 根据获取到的值，使用循环结构动态创建新的 HTML 元素（如 和 ）。
   • 将新创建的元素添加到页面的指定容器中。

本教程将主要利用 innerHTML 属性进行 DOM 操作，它允许我们方便地设置或获取元素的 HTML 内容。

逐步实现

我们将构建一个简单的示例，其中一个下拉菜单允许用户选择“1个选项”、“2个选项”等，然后页面会根据选择动态显示相应数量的文本输入框。

1. HTML 结构准备

首先，我们需要一个包含下拉菜单 () 和一个用于承载动态生成字段的容器 () 的 HTML 结构。

  
  
  


  
    
根据选择动态显示输入字段
    
请从下拉菜单中选择您需要的输入字段数量。
  

  

    
      
        选择选项数量:
        

1 个选项 2 个选项 3 个选项 4 个选项

关键点：

• ：id 用于 JavaScript 访问，onchange 事件绑定到 genFields() 函数。
• ：这是一个空的容器，所有的动态输入字段都将注入到这里。

2. JavaScript 逻辑编写

接下来，我们需要编写 genFields() 函数，它将在 select 选项改变时被调用。

代码解析：

• fieldsContainer.innerHTML = "";：这是清空旧字段的关键步骤。每次选择变化时，我们都先清空容器，然后重新生成。
• parseInt(document.getElementById("id_type").value, 10)：获取 select 选中的 value，并将其转换为整数。10 表示使用十进制。
• for (let i = 1; i
• 模板字符串：`` (反引号) 允许我们方便地嵌入变量和多行 HTML 字符串，使代码更易读。
• fieldsContainer.innerHTML += fieldHtml;：将新生成的字段 HTML 追加到容器的末尾。
• document.addEventListener('DOMContentLoaded', genFields);