根据选定的下拉列表更改提交按钮名称

在前端开发中，根据选定的下拉列表更改提交按钮名称是一个常见的交互需求。以下是实现这一功能的基础概念、步骤和相关代码示例。

基础概念

DOM操作：通过JavaScript操作HTML文档对象模型（DOM），动态修改页面元素的内容。
事件监听：为下拉列表添加事件监听器，以便在用户选择不同选项时触发相应的函数。

实现步骤

创建一个下拉列表（<select>）和一个提交按钮（<button>）。
使用JavaScript监听下拉列表的change事件。
在事件处理函数中，根据选中的选项动态更改提交按钮的文本。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Button Text</title>
</head>
<body>
    <form>
        <label for="actionSelect">Select an action:</label>
        <select id="actionSelect">
            <option value="submit">Submit</option>
            <option value="save">Save</option>
            <option value="delete">Delete</option>
        </select>
        <button type="submit" id="submitButton">Submit</button>
    </form>

    <script>
        document.getElementById('actionSelect').addEventListener('change', function() {
            var selectedAction = this.value;
            var submitButton = document.getElementById('submitButton');
            submitButton.textContent = selectedAction.charAt(0).toUpperCase() + selectedAction.slice(1);
        });
    </script>
</body>
</html>

代码解释

HTML部分：
- 创建了一个下拉列表<select>，包含三个选项：Submit、Save和Delete。
- 创建了一个提交按钮<button>，初始文本为"Submit"。

JavaScript部分：
- 使用document.getElementById获取下拉列表和提交按钮的引用。
- 为下拉列表添加change事件监听器。
- 在事件处理函数中，获取选中的值，并根据该值更新提交按钮的文本内容。例如，如果选中"save"，按钮文本将变为"Save"。