Clic dans une liste déroulante et action associée

**RENAUDER** · 29/01/2009, 12h38

Bonjour,

j'ai la liste suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<select name="departement" id="departement">
<optgroup label="France métropolitaine">
<option value="1">Ain (01)</option>
<option value="2">Aisne (02)</option>
<option value="3">Allier (03)</option>
<option value="4">Alpes-de-Haute-Provence (04)</option>
<option value="5">Hautes-Alpes (05)</option>
<option value="6">Alpes-Maritimes (06)</option>
</select>

Je voudrais lorsque je sélectionne un élément de la liste, ça me déclenche une action pour activer dans une iframe, le fichier htm concerné.
Exemple :
Clic sur 01-Ain et activation du fichier 01.htm dans l'Iframe
Clic sur 02-Aisne et activation du fichier 02.htm dans l'Iframe

**12monkeys** · 29/01/2009, 12h57

Bonjour

Ce n'est pas possible en HTML pur, tourne toi plutôt vers javascript...

**franculo_caoulene** · 29/01/2009, 13h03

Salut,

Je te propose trois liens :
https://developer.mozilla.org/En/DOM/Element.onchange
http://javascript.developpez.com/faq...amps#valSelect
http://javascript.developpez.com/faq...e#frame.reload

**RENAUDER** · 29/01/2009, 13h40

Bonjour,

J'ai regardé les 3 liens mais je ne suis pas suffisament connaisseur pour adapter le JS à mon problème.
Lorsque je sélectionne un élément de la liste, je ne sais pas comment faire. Je voudrais que ça agisse un peu comme un lien
hypertexte : <a href="01.htm" target="cadreiframe">Exemple</a>
mais activer par la sélection dans la liste

Code :

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="departement" id="departement">
<optgroup label="France métropolitaine">
<option value="1">Ain (01)</option>
<option value="2">Aisne (02)</option>
<option value="3">Allier (03)</option>
<option value="4">Alpes-de-Haute-Provence (04)</option>
<option value="5">Hautes-Alpes (05)</option>
<option value="6">Alpes-Maritimes (06)</option>
</select>	
Que faire de ce code pour qu'il convertisse le résultat comme un lien hypertexte cliqué !!!
<script type="text/javascript">
 elem=document.getElementById('departement').options[document.getElementById('departement').selectedIndex].value
</script>

**marcha** · 29/01/2009, 13h46

Salut,

Code :

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

1
2
3
4
5
6
7
8
 
<script type="text/javascript">
function listLink() {
  var url = this.options[this.selectedIndex].value;
  window.location.href = url; // pour changer la page courrante
  document.getElementById('id_du_frame').src = url; // pour un iframe (sauf erreur)
}
</script>

Et dans la liste

Code :

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

1
2
 
<select onchange='listLink()' ...>

EDIT: si le value correspond pas exactement à l'url, ajoute '.html' ou autre à la variable url.

**RENAUDER** · 29/01/2009, 14h32

Bonjour,

Maintenant j'ai mis comme le code comme tu m'as dis (est-ce bon ?)
Par contre je ne comprends pas ce que tu veux dire par :
Si le value (ex. 1, 2 , 3...) correspond pas exactement à l'url, ajoute '.html' ou autre à la variable 'url'
J'ai un fichier 1.html qui correspond à la sélection 1 et etc.. pour les autres 2.html ...
Dois-je modifier la variable url et quelle est la syntaxe var=url.html ?
Actuellement si je sélectionne l'option 1, ma page 1.html ne s'affiche pas !!!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>	   
<select onchange='listLink()'name="departement" id="departement">
<optgroup label="France métropolitaine">
<option value="1">Ain (01)</option>
<option value="2">Aisne (02)</option>
<option value="3">Allier (03)</option>
<option value="4">Alpes-de-Haute-Provence (04)</option>
<option value="5">Hautes-Alpes (05)</option>
<option value="6">Alpes-Maritimes (06)</option>
</select>	
</body>

**marcha** · 29/01/2009, 14h40

test ceci et vérifie que ce qui s'affiche corresponde bien
à l'url dont tu as besoin:

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
function listLink() {
  var url = this.options[this.selectedIndex].value + ".htm";
  alert(url);
}
</script>

**RENAUDER** · 29/01/2009, 14h59

Bonjour,
Hélas ça ne fonctionne pas, je n'ai rien qui s'affiche.
Je t'envoie le code tel que je l'ai dans ma feuille et peut-être verras tu l'erreur ?

Code :

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
 
</head>	  
<script type="text/javascript">
function listLink() {
  var url = this.options[this.selectedIndex].value + ".htm";
  alert(url);
}
</script>
 
<body>	   
<select onchange='listLink()' name="departement" id="departement">
<optgroup label="France métropolitaine">
<option value="1">Ain (01)</option>
<option value="2">Aisne (02)</option>
<option value="3">Allier (03)</option>
<option value="4">Alpes-de-Haute-Provence (04)</option>
<option value="5">Hautes-Alpes (05)</option>
<option value="6">Alpes-Maritimes (06)</option>
</select>	
</body>

**marcha** · 29/01/2009, 16h11

Mea Culpa, j'ai plus l'habitude de mapper les évènement ainsi :-)

Voici le code

Code :

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

1
2
3
4
5
6
<script type="text/javascript">
function listLink(list) {
  var url = list.options[list.selectedIndex].value + ".htm";
  alert(url);
}
</script>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<select onchange='listLink(this)' name="departement" id="departement">
<optgroup label="France métropolitaine">
<option value="1">Ain (01)</option>
<option value="2">Aisne (02)</option>
<option value="3">Allier (03)</option>
<option value="4">Alpes-de-Haute-Provence (04)</option>
<option value="5">Hautes-Alpes (05)</option>
<option value="6">Alpes-Maritimes (06)</option>
</select>

Clic dans une liste déroulante et action associée

JavaScript

Discussions similaires

Partager

Partager