Ubah hala ke borang dan pilih pilihan hanya apabila butang diklik - jika tidak lalai kepada paparan standard tab navigasi

Question

Saya mempunyai borang pada satu tab navigasi dan saya memautkannya dari tab navigasi yang lain. Saya menggunakan kod di bawah untuk memaut ke semua tab navigasi saya daripada berbilang halaman.

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

Ia berkesan, tetapi:

1. Jika boleh saya ingin mengalih keluar hashtag selepas mengubah hala dari url. Ini adalah masalah yang saya hadapi dengan bahagian javascript ini.

2. Satu lagi ialah: Untuk menggunakan butang untuk memaut ke borang saya, saya menghasilkan penyelesaian berikut:

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

Pada pandangan pertama ini berfungsi, namun, jika saya akhirnya memaut kembali ke borang, pilihan lalai tidak lagi dipilih. Dalam sesetengah kes, tiada pilihan dipilih. Saya mahu borang sentiasa menunjukkan pilihan lalai yang dipilih (iaitu "0" secara lalai, jika tidak, ia akan dilumpuhkan) melainkan butang saya diklik. Saya mahu menukar nilai ini kepada pilihan 2 hanya apabila butang saya diklik. Jika saya mengubah hala ke borang saya daripada pautan lain, saya mahu nilai lalai dilumpuhkan dipaparkan

Ini adalah butang saya:

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

Mungkin seseorang yang lebih tahu tentang javascript boleh:

1. Bantu saya mengalih keluar cincang selepas ubah hala ke setiap tab navigasi&
2. Boleh menstruktur kod saya dengan lebih baik supaya hanya pilihan 2 dipilih apabila butang saya diklik.

Jika tidak, jika saya memaut ke borang atau mana-mana tab navigasi lain, saya hanya mahu menggunakan kod ini:

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

Jika anda boleh membantu, sila beritahu saya! Terima kasih terlebih dahulu.

Answer 1

1. Ganti cincang menggunakan API sejarah.
2. Gunakan selectedIndex untuk memilih pilihan lungsur turun.

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