本教程详细介绍了如何使用html和javascript实现动态级联选择框功能。通过监听第一个选择框的onchange事件，根据用户选择的值，动态清空并重新填充第二个选择框的选项，实现预设值和条件显示特定选项，从而提升用户交互体验和表单的智能化程度。
在Web应用开发中，经常需要实现表单元素之间的联动，特别是级联选择框（或称下拉菜单）。例如，用户在一个选择框中做出选择后，第二个选择框会根据第一个选择框的选择自动更新其选项，甚至预设某个值。这种交互模式能够极大地提升用户体验，简化数据输入。本文将详细讲解如何使用纯HTML和JavaScript实现这一功能。
1. HTML结构准备
首先，我们需要定义两个选择框的HTML结构。第一个选择框用于用户进行初始选择，第二个选择框将根据第一个选择框的输入动态更新。为了更好的用户体验，第二个选择框在初始状态下可以禁用，并在第一个选择框选择后启用。
关键点说明：
- onchange="preselectSTG()": 这是实现级联联动的核心。当用户改变第一个选择框（DG）的选项时，会触发preselectSTG() JavaScript函数。
- 第二个选择框初始状态: STG选择框初始时设置为disabled，并包含一个提示选项，直到DG选择框做出选择后才启用。
- 选项值与显示文本: 中，value是实际提交给后端的值，而标签内的文本是用户可见的显示文本。
2. JavaScript逻辑实现
接下来，我们将编写preselectSTG()函数来处理级联逻辑。此函数将获取第一个选择框的当前值，然后根据预设规则动态地清空并填充第二个选择框的选项。
JavaScript代码详解：
- 获取DOM元素: document.getElementById()用于获取DG和STG两个选择框的引用，以便后续操作。
- 初始状态处理: 在函数外部，我们设置了STGSelect.disabled = true; 和初始提示，确保页面加载时STG选择框是禁用状态。
- appendOption辅助函数: 封装了创建和添加选项的逻辑，使代码更简洁、可读性更强。每次添加选项时都会创建一个新的option元素。
-
preselectSTG()函数:
- const selectedDGValue = DGSelect.value;: 获取用户在第一个选择框中选择的值。
- STGSelect.innerHTML = '';: 重要步骤。在每次更新前，清空STG选择框中所有旧的选项，防止选项重复或残留。
- 启用/禁用逻辑: 根据selectedDGValue是否为空来启用或禁用STGSelect，并更新其提示信息。
- 条件判断: 使用if...else if...else结构根据selectedDGValue的值执行不同的逻辑。
- 动态创建选项: 调用appendOption辅助函数来创建并添加新的
- 多选项处理: 当selectedDGValue === 'C'时，需要添加两个选项（'Level 4'和'Level 5'），这里通过两次调用appendOption实现。
3. 完整示例代码
将上述HTML和JavaScript结合起来，即可得到一个完整的、可运行的动态级联选择框示例。
动态级联选择框教程
动态级联选择框示例
