如何使用jQuery修改HTML按钮标签的文本？含下拉按钮示例场景

没问题，我来一步步教你实现这个需求！针对你给出的HTML结构，咱们可以通过绑定下拉菜单选项的点击事件，来动态更新按钮里的文本内容。

实现步骤与代码示例 #

首先，咱们需要给所有下拉菜单的选项绑定点击事件，然后把选中的文本替换到按钮内部的<span>标签里（因为你的按钮文本是放在<span>里的）。

直接上可运行的jQuery代码：

// 监听下拉菜单选项的点击事件
$('.dropdown-item').on('click', function(e) {
    // 阻止a标签默认的跳转行为（如果不需要跳转的话）
    e.preventDefault();
    
    // 获取当前点击选项的文本内容，trim去掉可能的空格
    const selectedYear = $(this).text().trim();
    
    // 找到按钮里的span元素，更新它的文本
    $('.button-text span').text(selectedYear);
});

代码解释 #

• 绑定点击事件：$('.dropdown-item').on('click', ...) 选中所有带dropdown-item类的选项，给它们添加点击监听。
• 阻止跳转：e.preventDefault() 因为选项是<a>标签，默认会触发页面跳转，这行代码可以阻止这个行为，让咱们只做文本更新操作。
• 获取选中文本：$(this).text().trim() 这里的this指的是当前被点击的选项，text()获取它的文本内容，trim()是为了去掉文本前后可能存在的空格。
• 更新按钮文本：$('.button-text span').text(selectedYear) 选中带button-text类的按钮内部的<span>元素，用text()方法把它的内容替换成选中的文本。

额外说明 #

如果你的按钮文本没有放在<span>里，直接是按钮的内容，那代码可以简化成：

$('.button-text').text(selectedYear);

另外，要是你需要在更新文本的同时做其他操作（比如更新隐藏域的值、触发其他事件），都可以在这个点击事件的回调函数里添加对应的代码。

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