如何从nav-tab面板跳转至另一面板表单并选中指定下拉选项

实现思路 #

不需要用a标签包裹按钮或添加target属性，直接通过JavaScript监听按钮点击事件，完成切换目标Tab页和选中指定下拉选项两个核心操作即可。

具体代码实现 #

1. 按钮结构无需修改

保留你原有的按钮代码：

<button id="RequestReferences" class="btn btn-secondary btn-lg border-info border-2">
Request References!
</button>

2. 添加JavaScript逻辑

在页面底部（或单独的脚本文件中）加入以下代码：

// 获取所需DOM元素
const requestBtn = document.getElementById('RequestReferences');
const contactTabTrigger = document.getElementById('nav-contactme-tab');
const reasonDropdown = document.getElementById('reason');

// 绑定按钮点击事件
requestBtn.addEventListener('click', function() {
  // 1. 切换到Contact Me Tab页（使用Bootstrap Tab组件API）
  const targetTab = new bootstrap.Tab(contactTabTrigger);
  targetTab.show();
  
  // 2. 自动选中下拉框中"请求推荐信"的选项
  reasonDropdown.value = '2';
});

关键说明 #

• 用Bootstrap官方的Tab组件API切换Tab，确保和原有Tab组件的交互逻辑（如动画、ARIA属性更新）完全一致
• 通过设置下拉框的value属性为目标选项的对应值（这里是2），直接触发选项选中状态
• 若你使用的是jQuery版本的Bootstrap，可将Tab切换代码替换为$('#nav-contactme-tab').tab('show')，逻辑保持不变

内容的提问来源于stack exchange，提问作者The Digital Guru