如何实现选中下拉框部门选项后将其值复制到文本域？

我们用HTML+原生JavaScript就能实现这个功能，代码简单易懂，适合新手学习：

1. 先写HTML结构 #

先创建下拉框和文本域的基础结构：

<!-- 部门选择下拉框 -->
<select id="departmentSelect">
  <option value="">请选择部门</option>
  <option value="IT">IT部门</option>
  <option value="HR">HR部门</option>
  <option value="Finance">财务部门</option>
  <option value="Marketing">市场部门</option>
</select>

<!-- 备注文本域 -->
<textarea id="noteArea" rows="4" placeholder="请输入备注..."></textarea>

• id是为了让JS能精准定位元素，新手要记得给需要操作的元素加唯一标识。
• 下拉框的value是后续拼接前缀的核心标识，比如选“IT部门”时，value为IT，方便生成目标文本。

2. 编写JavaScript逻辑 #

给下拉框添加选择变化监听，用户切换选项时自动修改文本域内容：

// 获取页面上的下拉框和文本域元素
const departmentSelect = document.getElementById('departmentSelect');
const noteArea = document.getElementById('noteArea');

// 监听下拉框的选择变化事件
departmentSelect.addEventListener('change', function() {
  // 获取当前选中的部门标识值
  const selectedDept = this.value;
  
  // 根据选中值生成对应前缀
  let prefix = '';
  if (selectedDept) {
    prefix = `${selectedDept} Department:`;
  }
  
  // 设置文本域内容为前缀，并把光标移到前缀末尾
  noteArea.value = prefix;
  noteArea.focus();
  noteArea.setSelectionRange(prefix.length, prefix.length);
});

代码说明： #

• addEventListener('change', ...)：监听下拉框的选择切换，用户选新选项时触发函数。
• ${selectedDept} Department:：用模板字符串快速拼接前缀，新手可以理解成把选中的部门标识和固定文本连在一起。
• focus()和setSelectionRange：自动让文本域获得焦点，光标定位在前缀末尾，方便直接输入备注，提升操作体验。

3. 实际效果 #

• 选中“IT部门”时，文本域自动填充IT Department:，光标停在冒号后，可直接输入备注内容。
• 选中“请选择部门”时，文本域清空，回到初始状态。

把上面的HTML和JS代码放在同一个.html文件里，用浏览器打开就能直接测试效果，不需要额外工具。

内容的提问来源于stack exchange，提问作者Bakhodir Ibragimov