在前端交互开发中，根据下拉列表的选中值动态更新提交按钮的文本是很常见的需求，比如选择不同套餐时按钮显示对应套餐的提交文案，这类功能可以通过原生的JavaScript结合DOM操作快速实现。
实现原理分析
整个功能的实现逻辑主要分为三个步骤：首先搭建基础的页面结构，包含下拉列表和提交按钮两个核心元素；然后通过DOM方法获取这两个元素的引用；最后给下拉列表绑定change事件，在事件触发时读取下拉列表的当前选中值，将其赋值给提交按钮的文本内容即可。
基础HTML结构搭建
首先需要定义下拉列表和提交按钮的HTML结构，下拉列表通过select标签实现，内部包含多个option选项，提交按钮使用button标签定义，初始状态可以设置一个默认文本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉列表更新按钮文本</title>
</head>
<body>
<!-- 下拉列表结构 -->
<select id="optionSelect">
<option value="default">请选择套餐</option>
<option value="basic">基础套餐</option>
<option value="standard">标准套餐</option>
<option value="premium">高级套餐</option>
</select>
<!-- 提交按钮结构 -->
<button id="submitBtn">立即提交</button>
<script src="script.js"></script>
</body>
</html>
JavaScript逻辑实现
接下来编写JavaScript代码，核心逻辑是获取DOM元素、绑定事件、更新按钮文本，以下是完整的实现代码：
// 获取下拉列表元素
const selectElement = document.getElementById('optionSelect');
// 获取提交按钮元素
const submitBtn = document.getElementById('submitBtn');
// 定义选中值和按钮文本的映射关系
const textMap = {
'default': '立即提交',
'basic': '提交基础套餐',
'standard': '提交标准套餐',
'premium': '提交高级套餐'
};
// 给下拉列表绑定change事件
selectElement.addEventListener('change', function() {
// 获取当前选中的值
const selectedValue = this.value;
// 根据选中值从映射关系中获取对应的按钮文本，默认使用初始文本
const btnText = textMap[selectedValue] || '立即提交';
// 更新提交按钮的文本内容
submitBtn.textContent = btnText;
});
代码逻辑说明
- 首先通过
document.getElementById方法分别获取id为optionSelect的下拉列表和id为submitBtn的按钮元素，这是操作DOM元素的基础。 - 定义了一个
textMap对象，用来存储下拉列表不同选中值对应的按钮文本，这样后续如果新增选项只需要修改这个映射对象即可，不需要改动核心逻辑。 - 使用
addEventListener给下拉列表绑定change事件，当用户选择不同选项时，事件回调函数会自动执行。 - 在回调函数中，通过
this.value获取当前下拉列表的选中值，再从映射对象中取出对应的按钮文本，最后通过修改textContent属性更新按钮的显示内容。
扩展场景说明
如果需要处理更复杂的场景，比如选中值后按钮文本需要拼接动态内容，也可以直接修改回调逻辑，例如选中基础套餐后按钮显示"提交基础套餐（99元）"，只需要在映射对象中补充对应的文本即可，不需要调整整体的实现框架。另外如果页面中有多个类似的下拉列表和按钮组合，也可以将逻辑封装成函数，通过传入不同的元素id实现复用。
JavaScriptHTMLDOM操作事件监听修改时间：2026-06-18 15:12:24