如何实现点击按钮将Bootstrap Dropdown下拉筛选值重置为对应默认值

解决方法 #

你原有代码的问题是重置逻辑里给所有下拉按钮统一写死了赋值为Filter，要实现还原各自的默认值，只需要提前存储每个下拉按钮的初始文本，重置时读取对应值赋值即可，不需要修改原有HTML代码，仅调整JS部分就行。

修改后的完整JS代码如下：

// 页面加载完成后先存储所有下拉按钮的默认原始文本
$(".dropdown .btn").each(function() {
    $(this).data('defaultText', $(this).text());
});

// 下拉选项选择逻辑保持不变
$(".dropdown-menu li a").on('click', function(e) {
    $(this).closest(".dropdown").find('.btn').text($(this).text() + ' ');
});

// 修改后的重置逻辑
$('.resetdropdown').on('click', function(e) {
    $(".dropdown .btn").each(function() {
        // 读取之前存储的默认文本赋值回去
        $(this).text($(this).data('defaultText'));
    });
})

实现逻辑说明 #

• 页面初始化阶段通过jQuery的data()方法，给每个下拉按钮挂载自定义属性存储它的初始默认值，也就是你代码里写的Car brand、Model这类初始文本
• 重置时遍历所有下拉按钮，把各自提前存储的默认值赋值回去即可，后续新增下拉筛选也不需要修改重置逻辑，自动适配新的下拉默认值

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