Discussion :

[SosChiensDordogne]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Sparky95]

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

[jreaux62]

Bonjour,

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

• soit "en ligne de code" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

• soit externalisé :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !)

[SosChiensDordogne]

Rebonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[jreaux62]

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é...

[SosChiensDordogne]

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