Ajouter un lien au changement de sélection d'un SELECT

Bonjour a toutes et à tous.

J'ai cette barre select et je ne sais comment y ajouter un lien vers une page sur chaque catégorie.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<select name="pets" id="pet-select"> <option value="">--Cboisissez un groupe--</option> <option value="dog">Groupe 1 : premier groupe</option> <option value="cat">Groupe 2 : deuxieme groupe</option> <option value="hamster">Groupe 3 : troisieme groupe</option> <option value="">Groupe 4 : quatrieme groupe</option> <option value="spider">Groupe 5 : cinquieme groupe</option> <option value="goldfish">Groupe 6 : sixieme groupe</option> <option value="goldfish">Groupe 7 : septieme groupe</option> <option value="goldfish">Groupe 8 : huitieme groupe</option> <option value="goldfish">Groupe 9 : neuvieme groupe</option> <option value="goldfish">Groupe 10 : dixieme groupe</option> </select> </div>

---

Si vous avez une solution, je vous en remercie

Bonjour,
Si j'ai bien compris ce que vous souhaitez faire, c'est un menu déroulant qui permettra du coup d'être redirigé vers les pages souhaitez et non un champ de formulaire de type select.
Je vous conseil de jeter un coup d'oeil à cette page.
https://getbootstrap.com/docs/5.1/co...ns/#menu-items
Je penses que cela correspondra plus à ce que vous souhaitez mettre en place
Bonne journée,
Sparky

Bonjour,

1- il est possible de s'en sortir avec un <select> :

• soit "en ligne de code" :

Code:

---

<select name="pets" id="pet-select" onchange="if(this.value!=''){ window.location.href = this.value }; return false;">

---

• soit externalisé :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

window.addEventListener("DOMContentLoaded", (event) => { document.getElementById('pet-select').addEventListener('change', (e) => { e.preventDefault(); let url = e.target.value; if( url != '' ) { // console.log( url ); // test window.location.href = url; } }); });

---

Evidemment, il faut que les value="..." des <option> contiennent les URLs des pages.

2- Néanmoins, puisqu'il s'agit plutôt d'un menu de navigation, la solution proposée par Sparky95 est préférable.
(pour peu que tu utilises Bootstrap !)

Rebonjour,

J'ai ceci mais cela ne fonctionne pas, et avec bootstrap je ne m"en sors pas.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<script>        function Lien() {         i = document.Choix.Liste.selectedIndex;         if (i == 0) return;         url = document.Choix.Liste.options[i].value;         parent.location.href = url;}    </script> </body> <form name="Choix"> <select name="Liste" onChange="Lien()"> <option name="">Choisir une option <option name="">Groupe 1 : premier groupe <option name="www.google.com">Groupe 2 : deuxieme groupe <option name="">Groupe 3 : troisieme groupe <option name="">Groupe 4 : quatrieme groupe <option name="">Groupe 5 : cinquieme groupe <option name="">Groupe 6 : sixieme groupe <option name="">Groupe 7 : septieme groupe <option name="">Groupe 8 : huitieme groupe <option name="">Groupe 9 : neuvieme groupe <option name="">Groupe 10 : dixieme groupe </select> </form>

---

Merci d"avance

Bonjour,

Quand on a pris le temps de te répondre, et de t'avoir écrit du code, le minimum est de le TESTER.

Quant à Bootstrap, vu tous les tutos disponibles, il faut vraiment beaucoup de mauvaise volonté...

Bonjour,
Desole j'ai teste et il y a une erreur. ligne 1 et ligne 2
Je suis desole que tu le prenne ainsi

Re..
Ca y est j'ai trouve comment faire...Merci

Je te conseil lorsque tu sais t'en sortir avec seulement de l'HTML de choisir cette voix la (surtout au début).