僅在單擊按鈕時重定向到表單並選擇選項 - 否則預設為導航選項卡的標準顯示

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");
}