实现下拉列表选中值同步显示到提交按钮的技术问询

核心思路 #

监听下拉列表的选择变化事件，实时把选中的选项文本更新到提交按钮上，同时页面加载时默认同步初始选中值。

代码实现 #

HTML结构

<!-- 下拉列表 -->
<select id="targetSelect">
  <option value="opt1">欧洲经典全景游</option>
  <option value="opt2">东南亚海岛度假</option>
  <option value="opt3">北美自驾探险</option>
</select>

<!-- 提交按钮 -->
<button id="submitBtn">提交申请</button>

JavaScript逻辑

// 获取DOM元素
const selectElement = document.getElementById('targetSelect');
const submitButton = document.getElementById('submitBtn');

// 定义更新按钮文本的函数
function syncBtnText() {
  const selectedText = selectElement.options[selectElement.selectedIndex].text;
  submitButton.innerText = `提交${selectedText}申请`;
}

// 页面加载完成后同步初始选中值
window.addEventListener('DOMContentLoaded', syncBtnText);

// 监听下拉选择变化，实时更新按钮文本
selectElement.addEventListener('change', syncBtnText);

自定义说明 #

如果需要调整按钮的文本格式，直接修改syncBtnText函数里的字符串拼接逻辑即可，比如改成"确认选择：" + selectedText这类形式。

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