Bootstrap下拉菜单如何根据URL查询参数匹配data-key触发对应点击

问题原因 #

现有代码存在三个核心问题导致无法触发对应下拉项点击：

• 未做参数值与data-key属性的匹配逻辑，当前代码会触发所有下拉菜单项的点击事件
• 手动拆分URL参数的方式容错性低，且未判断参数是否为目标key参数
• 若JS代码放在页面头部未等DOM加载完成就执行，会找不到对应元素导致触发无效

修复方案 #

推荐使用浏览器原生URLSearchParams接口解析查询参数，匹配到对应data-key的元素后再触发点击，完整代码如下：

修复后的JS代码 #

// 等待DOM加载完成后再执行逻辑
$(function() {
    // 解析URL查询参数
    const searchParams = new URLSearchParams(window.location.search);
    // 取key参数的值
    const targetKey = searchParams.get('key');
    if (!targetKey) return;

    // 匹配对应data-key的下拉项并触发点击
    const targetItem = $(`.dropdown-menu a[data-key="${targetKey}"]`);
    if (targetItem.length) {
        targetItem.trigger('click');
        // 若需要同步更新下拉按钮的显示文本，可放开下面这行注释
        // $('#startDate').text(targetItem.text());
    }
});

补充说明 #

如果你的下拉点击逻辑依赖下拉菜单展开状态，可以在触发点击前先调用Bootstrap下拉的show方法：

$('#startDate').dropdown('show');

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