如何通过Dropdown下拉框实现邮件签名预览字段填充？

核心思路 #

监听下拉框的change事件，根据选中的电话类型（mobile/fax），实时更新预览区对应的前缀文本（m:/f:）。

代码实现示例 #

HTML 结构

<!-- 下拉选择框 -->
<select id="phoneType">
  <option value="mobile">Mobile</option>
  <option value="fax">Fax</option>
</select>

<!-- 实时预览区 -->
<div class="signature-preview">
  <span id="phonePrefix">m:</span>
  <span id="phoneNumber"></span> <!-- 对应已实现同步的电话号码输入框 -->
</div>

JavaScript 逻辑

// 获取DOM元素
const phoneTypeSelect = document.getElementById('phoneType');
const phonePrefixElement = document.getElementById('phonePrefix');

// 初始化前缀，匹配下拉框默认选中项
phonePrefixElement.textContent = phoneTypeSelect.value === 'mobile' ? 'm:' : 'f:';

// 监听下拉框选择变化
phoneTypeSelect.addEventListener('change', function() {
  // 根据选中值更新预览区前缀
  phonePrefixElement.textContent = this.value === 'mobile' ? 'm:' : 'f:';
});

关键说明 #

• 页面加载时先初始化前缀，确保预览区和下拉框默认选项保持一致
• 通过change事件捕捉下拉框的选择变动，实时触发预览区更新
• 用三元表达式简洁判断选中值对应的前缀，也可以替换为if-else逻辑，效果一致

如果你的项目基于Vue/React等框架，只需调整DOM获取和事件绑定的方式，核心逻辑仍是监听选择变化 -> 更新预览区文本。

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