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

Version imprimable

Bonjour,

j'ai la liste suivante :
Code:

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

29/01/2009, 12h57
12monkeys

Bonjour

Ce n'est pas possible en HTML pur, tourne toi plutôt vers javascript...
29/01/2009, 13h03
franculo_caoulene

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

Mise en forme du code Javascript ?

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:

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>

Salut,

Code:

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:

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

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

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:

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>

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

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

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:

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>

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

Voici le code

Code:

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:

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>