如何在表单中实时将<Select>选中内容显示到<h1>标签

嘿，这需求挺常见的，用原生JavaScript就能轻松搞定，不用依赖任何框架。我直接给你改好完整的代码，再一步步拆解逻辑：

完整代码示例 #

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select id="cars" name="cars">
    <option value="volvo">Volvo XC90</option>
    <option value="saab">Saab 95</option>
    <option value="mercedes">Mercedes SLK</option>
    <option value="audi">Audi TT</option>
  </select>
  <!-- 给H1标签加唯一ID，方便JS定位修改 -->
  <h1 id="selectedCarDisplay"></h1>
  <input type="submit" value="Submit">
</form>

<script>
// 获取下拉菜单和目标H1元素
const carSelect = document.getElementById('cars');
const displayElement = document.getElementById('selectedCarDisplay');

// 页面加载时先显示默认选中的选项内容
displayElement.textContent = carSelect.options[carSelect.selectedIndex].text;

// 监听下拉菜单的选项变更事件
carSelect.addEventListener('change', function() {
  // 将选中项的文本内容同步到H1标签
  displayElement.textContent = this.options[this.selectedIndex].text;
});
</script>

关键逻辑说明 #

• 给H1加标识：原来的空<h1>没有唯一标识，我们给它加了id="selectedCarDisplay"，让JavaScript能精准找到并修改它的内容。
• 初始化默认显示：页面刚加载时，默认选中第一个选项，我们提前把它的文本放到H1里，避免页面一开始是空的，体验更好。
• 监听选项变更：下拉菜单切换选项时会触发change事件，我们在这个事件里获取当前选中项的文本，用textContent赋值给H1——这个属性比innerHTML更安全，只会处理纯文本，避免潜在的XSS风险。

这样用户选任何选项，H1里的内容都会立刻同步更新啦～

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