Ustawianie select option na podstawie linku

pytanie zadane 20 czerwca 2021 w HTML i CSS przez Zawoj11 Użytkownik (850 p.)

Witam na podstawie przykładu pokażę z czym ostatnio się borykam.

Otóż chciałbym stworzyć coś takiego, i nie jestem pewny do końca jak to zrobić.

Więc tak:
Mam np stronę główną, gdzie są linki. I one przenoszą nas na podstronę z formularzem kontaktowym. Ale dodatkowo zależnie który link klikniemy to ustawiam nam odpowiednią opcję w znaczniku <select>

Zauważyłem że na wielu stronach jest tak że ten link wygląda jakoś tak:
jakis/link/do/kontaktu/?pets=dog

Strona Główna:

<section>
    <a href="link/do/konaktu/?pets=dog"></a> <- po przeniesieniu ustawi opcję dog
    <a href="link/do/konaktu/?pets=cat"></a> <- po przeniesieniu ustawi opcję cat
    <a href="link/do/konaktu/?pets=hamster"></a> <- po przeniesieniu ustawi opcję hamster
</section>

Podstrona kontaktowa

<section class="form">
<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
</section>

3 odpowiedzi

odpowiedź 21 czerwca 2021 przez VBService Ekspert (255,840 p.)
wybrane 21 czerwca 2021 przez Zawoj11

Najlepsza

Jeśli z jakiś powodów nie możesz użyć jakiegokolwiek języka "backend-owego" (np.: php jak wspomniał @SzkolnyAdmin), zawsze możesz użyć window.location.search do przenoszenia "danych" między stronami.

Przykład użycia window.location.search

glowna.html

<section>
  <a href="kontakt.html?pets=dog">dog</a> <!-- po przeniesieniu ustawi opcję dog -->
  <a href="kontakt.html?pets=cat">cat</a> <!-- po przeniesieniu ustawi opcję cat -->
  <a href="kontakt.html?pets=hamster">hamster</a> <!-- po przeniesieniu ustawi opcję hamster -->
  <a href="kontakt.html?pets=goldfish">goldfish</a>
</section>

kontakt.html

<body>
  <section class="form">
    <label for="pet-select">Choose a pet:</label>
 
    <select name="pets" id="pet-select">
      <option value="">--Please choose an option--</option>
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>
  </section>
</body>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.location.search.split('?').length > 1) {
      const value_from_href = window.location.search.split('?')[1].split('=')[1];
      selectingOption(value_from_href);
    }
  });

  function selectingOption(option_to_choose) {
    const select_pets = document.querySelectorAll('#pet-select option');
    select_pets.forEach((option_) => {
      if (option_.value.toLowerCase() == option_to_choose.toLowerCase()) {
        option_.setAttribute('selected', 'selected');
      }
    });
  }   
</script>

działa także z <optgroup>

kontakt.html

<body>
  <section class="form">
    <label for="pet-select">Choose a pet:</label>
 
    <select name="pets" id="pet-select">
      <option value="">--Please choose an option--</option>
      <optgroup label="Mammals">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="hamster">Hamster</option>
      </optgroup>
      <optgroup label="Birds">
        <option value="parrot">Parrot</option>
      </optgroup>
      <optgroup label="Arachnids">
        <option value="spider">Spider</option>
      </optgroup>
      <optgroup label="Fishes">
        <option value="goldfish">Goldfish</option>
      </optgroup>
    </select>
  </section>
</body>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (window.location.search.split('?').length > 1) {
      const value_from_href = window.location.search.split('?')[1].split('=')[1];
      selectingOption(value_from_href);
    }
  });

  function selectingOption(option_to_choose) {
    const select_pets = document.querySelectorAll('#pet-select option');
    select_pets.forEach((option_) => {
      if (option_.value.toLowerCase() == option_to_choose.toLowerCase()) {
        option_.setAttribute('selected', 'selected');
      }
    });
  }   
</script>