Concténer la selection de deux listes déroulantes pour obtenir une url

Version imprimable

03/12/2014, 23h15
PaRaDiGm

Concténer la selection de deux listes déroulantes pour obtenir une url

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.
04/12/2014, 00h31
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.

J'en suis venu à ce code:

Code:

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:

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?

04/12/2014, 14h14
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 :ccool:
04/12/2014, 14h21
PaRaDiGm

Citation:

Envoyé par 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 :ccool:

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.
04/12/2014, 14h56
SpaceFrog

Avec des tests if ...
04/12/2014, 16h04
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.

J'ai trouvé la solution:

Code:

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.