仅在单击按钮时重定向到表单并选择选项 - 否则默认为导航选项卡的标准显示

Question

我在一个导航选项卡上有一个表单，并且我从另一个导航选项卡链接到它。我使用下面的代码从多个页面链接到我的所有导航选项卡。

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

它有效，但是：

1. 如果可能的话，我想在从网址重定向后删除主题标签。这是我在使用这部分 javascript 时遇到的一个问题。

2. 另一个是：为了使用按钮链接到我的表单，我想出了以下解决方案：

   function redirectToForm() {
           window.location.href = "http://www.example.com/#nav- 
       contact-me-tab";
           localStorage.setItem("selectedOption", "2");
       }
   
       const hash=window.location.hash;
       const bsTab = new bootstrap.Tab(hash);
       bsTab.show();
   
       var selectedOption = 
     localStorage.getItem("selectedOption");
       document.getElementById("reason").value = selectedOption;
       localStorage.removeItem("selectedOption");

乍一看，这有效，但是，如果我最终链接回表单，则不再选择默认选项。在某些情况下，没有选择任何选项。我希望表单始终显示默认选定的选项（默认情况下为“0”，否则将被禁用），除非单击我的按钮。仅当单击我的按钮时，我才想将此值更改为选项 2。如果我从另一个链接重定向到我的表单，我希望显示默认禁用值

这是我的按钮：

<button id="gotoformselect2" onclick="redirectToForm()">Request References</button>

也许更了解 javascript 的人可以：

1. 帮助我在重定向到每个导航选项卡后删除哈希值&
2. 可以更好地构建我的代码，以便在单击我的按钮时仅选择选项 2。

否则，如果我链接到表单或任何其他导航选项卡，我只想使用此代码：

const hash=window.location.hash;
        const bsTab = new bootstrap.Tab(hash);
        bsTab.show();

如果您能提供帮助，请告诉我！提前致谢。

Answer 1

1. 使用history API替换哈希值。
2. 使用 selectedIndex 来选择下拉选项。

function redirectToForm() {
  window.location.href = "http://www.example.com/#nav-contact-me-tab";
  localStorage.setItem("selectedOption", "2");
}

if (location.hash) {
  const hash = location.hash;
  const bsTab = new bootstrap.Tab(hash);
  bsTab.show();
  history.replaceState('', null, location.origin+location.pathname); //replaces the hash
}

if (localStorage.getItem('selectedOption')) {
  const option = localStorage.getItem('selectedOption');
  document.getElementById('reason').selectedIndex = option;
  localStorage.removeItem("selectedOption");
}