如何根据下拉选择框选项或输入框内容动态改变显示文本？

以下是满足需求的完整实现代码，核心逻辑是通过监听下拉框的选择事件和输入框的输入事件，动态更新显示区域的文本：

完整代码 #

<select id="font-sample-option">
  <option value="1" selected="selected">Aa Bb Cc Dd Ee...</option>
  <option value="2">The quick brown fox...</option>
  <option value="3">When zombies arrive...</option>
</select>

<span>Or</span>

<input id="font-sample-input" placeholder="Type here ..." maxlength="55" type="text">

<!-- 显示区域 -->
<span class="font-sample-display">Aa Bb Cc Dd Ee...</span>

<script>
// 获取DOM元素
const selectEl = document.getElementById('font-sample-option');
const inputEl = document.getElementById('font-sample-input');
const displayEl = document.querySelector('.font-sample-display');

// 监听下拉框选择事件
selectEl.addEventListener('change', function() {
  // 更新显示文本为选中选项的内容
  displayEl.textContent = this.options[this.selectedIndex].text;
  // 清空输入框
  inputEl.value = '';
});

// 监听输入框输入事件（实时同步）
inputEl.addEventListener('input', function() {
  // 更新显示文本为输入框内容
  displayEl.textContent = this.value;
});
</script>

功能说明 #

• 默认状态：页面加载后，显示区域默认展示下拉框选中的初始文本"Aa Bb Cc Dd Ee..."
• 下拉框选择：切换下拉框选项时，显示区域会同步更新为选中选项的文本，同时自动清空输入框内容
• 输入框输入：在输入框中输入内容时，显示区域会实时同步输入的内容
• 再次选择下拉框：无论输入框是否有内容，选择下拉框选项后都会覆盖显示文本并清空输入框

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