本文介绍如何通过 javascript 实现用户选择下拉菜单（`
在 Web 表单开发中，常需根据用户选择动态更新其他表单字段内容。由于 PHP 是服务端语言，无法实时响应用户操作（如 onchange 事件），因此该功能必须借助客户端脚本——JavaScript 来完成。
以下是一个简洁、可直接运行的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下拉选择自动填充文本域</title>
</head>
<body>
<label for="Branch">分支机构：</label>
<select id="Branch" onchange="updateField(this.value)">
<option value="">-- 请选择 --</option>
<option value="MCG">MCG</option>
<option value="KB">KB</option>
<option value="KT">KT</option>
</select>
<br><br>
<label for="street">地址（自动填充）：</label><br>
<textarea id="street" name="street" rows="3" cols="40" placeholder="选择上方分支后自动填入"></textarea>
<script>
function updateField(value) {
if (value) {
document.getElementById("street").value = value;
} else {
document.getElementById("street").value = "";
}
}
</script>
</body>
</html>✅ 关键说明：
- 使用 onchange 事件监听
- this.value 获取当前选中项的 value 属性值（非显示文本）；
- document.getElementById("street").value = value 将值写入
- 添加空值判断，确保取消选择时清空文本域，提升用户体验。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 确保 id 属性唯一且与 JavaScript 中引用的 ID 严格一致（区分大小写）；
- 若页面中存在多个同类组件，建议改用 data-* 属性 + 事件委托方式增强可维护性；
- 此方案纯前端实现，提交表单时仍需后端（如 PHP）校验并处理 $_POST['street']，不可绕过安全验证。
该方法轻量、兼容性强（支持所有现代浏览器及 IE9+），是表单联动的通用实践方案。
