如何实现下拉选择框选中值插入textarea的Dear与Team之间

现有代码的核心问题 #

• 事件绑定失效：onchange="BankSel" 未加函数调用括号，选中选项时根本不会触发对应逻辑
• 取值逻辑错误：所有option的value属性为空，即使触发事件也拿不到选中的企业名称
• 文本更新逻辑偏差：原代码是把选中值追加到textarea文本末尾，和要求的「插入Dear与Team中间」的需求完全不匹配
• 函数内this指向错误：全局作用域下的事件绑定函数，this不会指向选中的select元素，this.value取不到有效值
• textarea内的<select>是纯文本内容，不会被解析为网页控件，仅为占位提示，无实际功能

修复实现思路 #

1. 给每个下拉选项的value属性赋值为对应的企业名称，保证能正常获取选中值
2. 采用固定邮件模板的拼接逻辑替代盲目追加文本，从根源保证内容位置符合要求
3. 修正事件绑定的调用格式，保证选择操作能触发更新逻辑
4. 去掉textarea里无意义的HTML标签占位，按模板动态渲染完整文本

可直接运行的修复代码 #

<select id="dropbank" name="" class="form-control-sm" onchange="BankSel()">
    <option value="">请选择对应企业</option>
    <option value="Albert House"> Albert House </option>
    <option value="Johnson corp"> Johnson corp </option>
    <option value="Elementry Homes"> Elementry Homes </option>
</select>

<textarea id="mailcon" name="" rows="10" cols="" class="form-control" aria-label="" readonly>
Dear  Team,

Trust this meets you well.
Warm Regards,
</textarea>

<script>
// 固定邮件模板，减少重复硬编码的错误
const MAIL_TEMPLATE = `Dear {company} Team,

Trust this meets you well.
Warm Regards,`;

function BankSel() {
    // 获取选中的企业名称
    const selectedVal = document.getElementById('dropbank').value;
    const mailContainer = document.getElementById('mailcon');
    // 替换模板占位符，生成最终显示内容
    mailContainer.value = MAIL_TEMPLATE.replace('{company}', selectedVal);
}
</script>

补充说明 #

如果不想每次全量拼接模板内容，也可以在textarea初始文本中留固定占位符，选中选项后直接用字符串替换的方式把占位符替换为选中的企业名，两种方式实现效果完全一致。

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