Discussion :

[PaRaDiGm]

Bonjour,

Je chercherai à créer deux listes déroulantes, par exemple la première contiendrait "Avis A" et "Avis B" et la seconde "Avis 1" et "Avis 2".

Le visiteur selectionerait par exemple "Avis 1" sur la premiere liste déroulante et "Avis 2" sur la seconde liste déroulante.

Une fois avoir cliqué sur le bouton envoyé il serait ainsi redirigé vers http://www.domaine.com/avis-a/avis-2/.

J'ai cherché sur Google mais tout les résultats que j'ai trouvé concernait des listes déroulantes liées dont la première influencerait la seconde.

Merci pour votre aide.

[SylvainPV]

Bonjour,

As-tu décomposé le problème en ses composantes ?
- récupérer la valeur sélectionnée dans une liste déroulante
- manipuler les String en JavaScript
- rediriger l'utilisateur vers une URL en JavaScript
- exécuter une fonction au clic sur un bouton

Chacun de ces problèmes a déjà été solutionné sur ce forum ou dans la FAQ JavaScript. Si tu bloques sur un point particulier, décris précisément le problème et poste ton code, nous pourrons t'aider plus efficacement.

[PaRaDiGm]

J'en suis venu à ce code:

Code :

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

1
2
3
4
5
6
var getURL = function(){
    var option1 = document.getElementById('dropDown1').value;
    var option2 = document.getElementById('dropDown2').value;
    var URL = 'http://www.domain.com/' + option1 + '/' + option2;
    location.href=(URL);
}

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
<select id="dropDown1">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
 
<select id="dropDown2">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>  
 
<button onclick="getURL()">Run</button>

Ce code est il compatible avec tout les browsers mobiles/tablettes?

[SylvainPV]

Tous ? Non ! Des fonds de tiroir peuplés d'irréductibles PDA et Pocket PC avec un browser vieux comme Mathusalem résistent encore et toujours à la modernité.

Pour tous les autres, ce code ne devrait poser aucun problème

[PaRaDiGm]

Tous ? Non ! Des fonds de tiroir peuplés d'irréductibles PDA et Pocket PC avec un browser vieux comme Mathusalem résistent encore et toujours à la modernité.

Pour tous les autres, ce code ne devrait poser aucun problème

On m'a dit de plutôt utiliser le Jquery pour ce script sur site mobile. Qu'en est il?

D'autre part, je souhaiterai que si je sélectionne dropDown1 value="3" et dropDown2 value="4", je puisse aller vers une url complètement différente, par exemple http://www.domain2.com/custom-url/. Comment réaliser cela?

Merci.

[SpaceFrog]

Avec des tests if ...

[SylvainPV]

Pourquoi utiliser jQuery si tu sais faire sans ? Sur certains points jQuery permet d'esquiver des bugs spécifiques à certains navigateurs, mais ici il y a vraiment peu de risques, le code est très simple.

[PaRaDiGm]

J'ai trouvé la solution:

Code :

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

1
2
3
4
5
6
7
8
9
var getURL = function(){
    var option1 = document.getElementById('dropDown1').value;
    var option2 = document.getElementById('dropDown2').value;
    var URL = 'http://www.domain.com/' + option2 + '/' + option1 + '/';
	if ((option1==2) && (option2==2)) {
    var URL = 'http://www.domain.com/';
} 
    location.href=(URL);
}

Merci pour votre aide.