本教程详细介绍了如何使用html和javascript实现动态级联选择框功能。通过监听第一个选择框的onchange事件，根据用户选择的值，动态清空并重新填充第二个选择框的选项，实现预设值和条件显示特定选项，从而提升用户交互体验和表单的智能化程度。
在Web应用开发中，经常需要实现表单元素之间的联动，特别是级联选择框（或称下拉菜单）。例如，用户在一个选择框中做出选择后，第二个选择框会根据第一个选择框的选择自动更新其选项，甚至预设某个值。这种交互模式能够极大地提升用户体验，简化数据输入。本文将详细讲解如何使用纯HTML和JavaScript实现这一功能。
1. HTML结构准备
首先，我们需要定义两个选择框的HTML结构。第一个选择框用于用户进行初始选择，第二个选择框将根据第一个选择框的输入动态更新。为了更好的用户体验，第二个选择框在初始状态下可以禁用，并在第一个选择框选择后启用。
<form>
<div class="form-group">
<label for="DG">决策组 (Decision Group):</label>
<select name="DG" id="DG" onchange="preselectSTG()">
<option value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div class="form-group">
<label for="STG">STGCD:</label>
<select name="STG" id="STG" disabled>
<option value="">请先选择决策组</option>
</select>
</div>
</form>关键点说明：
- onchange="preselectSTG()": 这是实现级联联动的核心。当用户改变第一个选择框（DG）的选项时，会触发preselectSTG() JavaScript函数。
- 第二个选择框初始状态: STG选择框初始时设置为disabled，并包含一个提示选项，直到DG选择框做出选择后才启用。
- 选项值与显示文本: 中，value是实际提交给后端的值，而标签内的文本是用户可见的显示文本。
2. JavaScript逻辑实现
接下来，我们将编写preselectSTG()函数来处理级联逻辑。此函数将获取第一个选择框的当前值，然后根据预设规则动态地清空并填充第二个选择框的选项。
<script>
const DGSelect = document.getElementById('DG');
const STGSelect = document.getElementById('STG');
// 初始禁用STG选择框并设置提示
STGSelect.disabled = true;
STGSelect.innerHTML = '<option value="">请先选择决策组</option>';
/**
* 辅助函数：向指定的select元素添加一个option
* @param {HTMLSelectElement} selectElement 目标select元素
* @param {string} text option的显示文本
* @param {string} value option的值
*/
function appendOption(selectElement, text, value) {
const option = document.createElement('option');
option.textContent = text;
option.value = value;
selectElement.appendChild(option);
}
function preselectSTG() {
const selectedDGValue = DGSelect.value;
// 清空STG选择框的所有现有选项
STGSelect.innerHTML = '';
// 如果DG选择框有有效选择，则启用STG选择框
if (selectedDGValue) {
STGSelect.disabled = false;
} else {
// 如果没有有效选择，禁用STG选择框并显示提示
STGSelect.disabled = true;
appendOption(STGSelect, '请先选择决策组', '');
return; // 提前退出函数
}
// 根据DG的选择值动态添加选项
if (selectedDGValue === 'A') {
appendOption(STGSelect, 'Level 3', 'LVL 3');
} else if (selectedDGValue === 'B') {
appendOption(STGSelect, 'Level 0', 'LVL 0');
} else if (selectedDGValue === 'C') {
appendOption(STGSelect, 'Level 4', 'LVL 4');
appendOption(STGSelect, 'Level 5', 'LVL 5'); // 为C添加多个选项
} else {
// 处理其他或未匹配的选项，例如显示默认提示
appendOption(STGSelect, '无可用级别', '');
STGSelect.disabled = true; // 也可以选择禁用
}
}
</script>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结合起来，即可得到一个完整的、可运行的动态级联选择框示例。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态级联选择框教程</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 200px; }
select:disabled { background-color: #f0f0f0; cursor: not-allowed; }
</style>
</head>
<body>
<h1>动态级联选择框示例</h1>
<form>
<div class="form-group">
<label for="DG">决策组 (Decision Group):</label>
<select name="DG" id 
