从场景到需求：为何要实现文本动态更新
需求背景与用户体验
在许多前端交互场景中，用户在下拉菜单中选择一个项后，按钮的文本应立即反映当前的选择，以提高可读性和操作的明确性。文本同步是提升体验的关键之一。
通过实现下拉按钮文本的动态更新，页面可以避免让用户猜测当前的选项，降低误操作的概率，并增强界面的直觉性。动态反馈是现代网页设计的重要原则。
本教程紧扣标题中的核心内容：前端必会：用 JavaScript 实现下拉按钮文本随选中项动态更新的完整教程。通过完整代码示例和逐步讲解，帮助你快速落地该交互。完整教程即将展开。
实现思路与核心要点
事件监听与状态同步
核心思路是为触发按钮和下拉项建立事件监听，在用户选择某一项时，获取该项的文本并将其写入按钮的显示文本，从而实现状态同步。
为了保持一致性，需要在选择后将下拉菜单关闭，以及更新可访问性属性，如 aria-expanded，从而让屏幕阅读器能够正确感知当前状态。ARIA 属性在无障碍设计中扮演着重要角色。
无障碍与键盘可访问性
使用合适的角色（如 role="menu"、role="menuitem"）和标签（如 aria-haspopup、aria-expanded），可以帮助屏幕阅读器正确解释组件结构。可访问性是现代前端组件的底层要求。
同时，提供键盘导航能力，如箭头键、回车键和 Esc 键的处理，确保所有用户都能以键盘完成交互，提升可访问性与容错性。
完整实现步骤
HTML 结构设计
设计一个可聚焦的触发按钮作为入口，旁边是一个下拉菜单容器，其中每个选项独立成按钮，便于聚焦和交互。这样的结构便于实现可访问且易维护的组件。
在语义层面，使用 aria-expanded 来表示菜单的展开状态，使用 role="menu" 和 role="menuitem" 来明确菜单及项的角色。
CSS 与样式要点
需要实现隐藏/显示逻辑、定位下拉列表以及对按钮和项的悬停、聚焦样式。良好的样式应兼顾小屏幕适配，确保可用性与美观性并存。
通过简洁的层级结构和清晰的视觉指示，用户可以直观地理解当前选中的文本与可选项的关系。响应式设计是本教程的重要考量。
JavaScript 实现逻辑
将事件处理与状态管理绑定在一起，包括：点击按钮切换菜单显示、点击项更新按钮文本并关闭菜单、点击页面其他区域时关闭菜单、以及键盘导航的实现。核心逻辑是文本更新和状态同步。
通过模块化的实现，可以将逻辑与样式解耦，便于复用到其他下拉场景中，并确保在未来扩展时的稳定性。模块化设计提升代码的可维护性。
代码示例：HTML、CSS、JavaScript
HTML 结构
<!-- 下拉组件的可访问结构 -->
<div class="dropdown" id="dropdown"><button class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" id="dropdownBtn">请选择</button><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownBtn" id="dropdownMenu"><li role="none"><button class="dropdown-item" type="button" role="menuitem">苹果</button></li><li role="none"><button class="dropdown-item" type="button" role="menuitem">橙子</button></li><li role="none"><button class="dropdown-item" type="button" role="menuitem">香蕉</button></li></ul>
</div>
CSS 样式
/* 基本布局与样式 */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { padding: 8px 12px; border: 1px solid #ccc; background: #fff; cursor: pointer; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; padding: 0; margin: 6px 0 0; list-style: none; border: 1px solid #ccc; background: #fff; z-index: 1000; }
.dropdown-menu .dropdown-item { width: 100%; padding: 8px 12px; border: none; background: transparent; text-align: left; cursor: pointer; }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: #f0f0f0; outline: none; }
/* 显示/隐藏切换的简易实现 */
.show { display: block; }
JavaScript 实现
(function () {const dropdown = document.getElementById('dropdown');const btn = document.getElementById('dropdownBtn');const menu = document.getElementById('dropdownMenu');const items = menu.querySelectorAll('.dropdown-item');// 切换显示/隐藏btn.addEventListener('click', function (e) {const expanded = btn.getAttribute('aria-expanded') === 'true';btn.setAttribute('aria-expanded', String(!expanded));menu.classList.toggle('show', !expanded);});// 外部点击关闭document.addEventListener('mousedown', function (e) {if (!dropdown.contains(e.target)) {btn.setAttribute('aria-expanded', 'false');menu.classList.remove('show');}});// 点击选项文本，更新按钮文本并关闭菜单items.forEach(function (item) {item.addEventListener('click', function () {btn.textContent = this.textContent;btn.setAttribute('aria-expanded', 'false');menu.classList.remove('show');});});// 键盘导航：按钮按下向下打开菜单，聚焦第一个选项btn.addEventListener('keydown', function (e) {if (e.key === 'ArrowDown') {e.preventDefault();btn.setAttribute('aria-expanded', 'true');menu.classList.add('show');items[0].focus();}});// 选项键盘交互：上下方向键切换，Enter/Space 选择items.forEach(function (item, idx) {item.addEventListener('keydown', function (e) {if (e.key === 'ArrowDown') {e.preventDefault();const next = items[idx + 1] || items[0];next.focus();} else if (e.key === 'ArrowUp') {e.preventDefault();const prev = items[idx - 1] || items[items.length - 1];prev.focus();} else if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();item.click();} else if (e.key === 'Escape') {btn.focus();btn.setAttribute('aria-expanded', 'false');menu.classList.remove('show');}});});
})();