如何在PHP或JS中实现下拉框选择变化时自动填充输入框？

需求说明：选择课程时自动设置对应部门，例如选择BSIT时，部门输入框自动填充为CIT。

原代码存在的问题 #

1. 语法错误：事件监听代码中，"change". getDept 里的点号应为逗号，导致事件无法正常绑定
2. 逻辑错误：函数末尾的document.getElementById("department").value=x;会覆盖之前的赋值，即使匹配到BSIT对应的CIT，最终部门值还是会被设为BSIT

修正后的完整代码 #

JavaScript 代码

// 定义课程与部门的映射关系，便于后续扩展
const courseDeptMap = {
  "BSIT": "CIT",
  "BSN": "Nursing", // 可根据实际需求补充其他对应关系
  "BSA": "Accountancy",
  "BSBA": "Business Administration",
  "BSHM": "Hospitality Management",
  "BSGE": "Geodetic Engineering",
  "BSCRIM": "Criminology",
  "BAPolSci": "Political Science",
  "BSM": "Management"
};

function getDept() {
  const courseValue = document.getElementById("course").value;
  // 根据课程值获取对应的部门，无匹配则设为空
  const deptValue = courseDeptMap[courseValue] || "";
  document.getElementById("department").value = deptValue;
}

// 修复语法错误，正确绑定change事件
document.getElementById("course").addEventListener("change", getDept);

HTML 代码

<label for="course">Course</label>

<select class="form-select" id="course" name="course" required>
  <option value="">Select Course</option> 
  <option value="BSIT">BSIT</option>
  <option value="BSN">BSN</option>
  <option value="BSA">BSA</option>
  <option value="BSBA">BSBA</option>
  <option value="BSHM">BSHM</option>
  <option value="BSGE">BSGE</option>
  <option value="BSCRIM">BSCRIM</option>
  <option value="BAPolSci">BAPolSci</option>
  <option value="BSM">BSM</option>
</select>

<label for="department">Department</label>
<input class="form-control" id="department" name="department" readonly>

改进说明 #

• 使用映射对象管理课程与部门的对应关系，新增课程时只需在courseDeptMap中添加键值对，无需修改函数逻辑，扩展性更强
• 修复了事件绑定的语法错误，确保选择课程时能触发部门赋值逻辑
• 移除了覆盖赋值的代码，保证匹配到的部门值不会被覆盖
• 处理了未选择课程或无对应部门的情况，自动清空部门输入框，提升用户体验

内容的提问来源于stack exchange，提问作者Rod Allen Agregado