Problème avec html et javascript
Résolu
info_l3
Messages postés
41
Statut
Membre
-
info_l3 Messages postés 41 Statut Membre -
info_l3 Messages postés 41 Statut Membre -
Bonjour,
je voudrais créer un formulaire,
dans celui ci il y aura 2 listes déroulantes, une pour région, et une pour département, comme ceci :
<select name="region" onchange="javascript:RendVisibleDep(this.value)">
<option value="france" selected="selected">Toute la France</option>
<option value="alsace">Alsace</option>
<option value="aquitaine">Aquitaine</option>
<option value="auvergne">Auvergne</option>
<option value="basse_normandie">Basse-Normandie</option>
<option value="bourgogne">Bourgogne</option>
<option value="bretagne">Bretagne</option>
<option value="centre">Centre</option>
<option value="champagne_ardenne">Champagne-Ardenne</option>
<option value="corse">Corse</option>
<option value="framche_comte">Franche-Comté</option>
<option value="guadeloupe">Guadeloupe</option>
<option value="guyane">Guyane</option>
<option value="haute_normandie">Haute-Normandie</option>
<option value="ile_de_france">Île-de-France</option>
<option value="la_reunion">La Réunion</option>
<option value="languedoc_roussillon">Languedoc-Roussillon</option>
<option value="limousin">Limousin</option>
<option value="lorraine">Lorraine</option>
<option value="martinique">Martinique</option>
<option value="midi_pyrenees">Midi-Pyrénées</option>
<option value="nord_pas_de_calais">Nord-Pas-de-Calais</option>
<option value="pays_de_la_loire">Pays de la Loire</option>
<option value="picardie">Picardie</option>
<option value="poitou_charentes">Poitou-Charentes</option>
<option value="provence_alpes_cote_d_azur">Provence-Alpes-Côte d'Azur</option>
<option value="rhone_alpes">Rhône-Alpes</option>
</select>
et celle pour les départements,
<select name="departement">
<option selected="selected">Département</option>
<optgroup id="alsace" style="display:none;" label="Alsace">
<option value="67">(67) Bas-Rhin</option>
<option value="68">(68) Haut-Rhin</option>
</optgroup>
<optgroup id="aquitaine" style="display:none;" label="Aquitaine">
<option value="24">(24) Dordogne</option>
<option value="33">(33) Gironde</option>
<option value="40">(40) Landes</option>
<option value="47">(47) Lot-et-Garonne</option>
<option value="64">(64) Pyrénées-Atlantiques</option>
</optgroup>
<optgroup id="auvergne" style="display:none;" label="Auvergne">
<option value="03">(03) Allier</option>
<option value="15">(15) Cantal</option>
<option value="43">(43) Haute-Loire</option>
<option value="63">(63) Puy-de-Dôme</option>
</optgroup>
<optgroup id="basse_normandie" style="display:none;">
<option value="14">(14) Calvados</option>
<option value="50">(50) Manche</option>
<option value="61">(61) Orne</option>
</optgroup>
<optgroup id="bourgogne" style="display:none;">
<option value="21">(21) Côte-d'Or</option>
<option value="58">(58) Nièvre</option>
<option value="71">(71) Saône-et-Loire</option>
<option value="89">(89) Yonne</option>
</optgroup>
<optgroup id="bretagne" style="display:none;">
<option value="22">(22) Côtes-d'Armor</option>
<option value="29">(29) Finistère</option>
<option value="35">(35) Ille-et-Vilaine</option>
<option value="56">(56) Morbihan</option>
</optgroup>
</select>
Je voudrais en fait faire en sorte que lorsque je choisis une région dans la première liste, alors les département de cette région s'affichent dans la seconde liste.
Je ne sais pas comment faire...
Merci beaucoup de votre aide
je voudrais créer un formulaire,
dans celui ci il y aura 2 listes déroulantes, une pour région, et une pour département, comme ceci :
<select name="region" onchange="javascript:RendVisibleDep(this.value)">
<option value="france" selected="selected">Toute la France</option>
<option value="alsace">Alsace</option>
<option value="aquitaine">Aquitaine</option>
<option value="auvergne">Auvergne</option>
<option value="basse_normandie">Basse-Normandie</option>
<option value="bourgogne">Bourgogne</option>
<option value="bretagne">Bretagne</option>
<option value="centre">Centre</option>
<option value="champagne_ardenne">Champagne-Ardenne</option>
<option value="corse">Corse</option>
<option value="framche_comte">Franche-Comté</option>
<option value="guadeloupe">Guadeloupe</option>
<option value="guyane">Guyane</option>
<option value="haute_normandie">Haute-Normandie</option>
<option value="ile_de_france">Île-de-France</option>
<option value="la_reunion">La Réunion</option>
<option value="languedoc_roussillon">Languedoc-Roussillon</option>
<option value="limousin">Limousin</option>
<option value="lorraine">Lorraine</option>
<option value="martinique">Martinique</option>
<option value="midi_pyrenees">Midi-Pyrénées</option>
<option value="nord_pas_de_calais">Nord-Pas-de-Calais</option>
<option value="pays_de_la_loire">Pays de la Loire</option>
<option value="picardie">Picardie</option>
<option value="poitou_charentes">Poitou-Charentes</option>
<option value="provence_alpes_cote_d_azur">Provence-Alpes-Côte d'Azur</option>
<option value="rhone_alpes">Rhône-Alpes</option>
</select>
et celle pour les départements,
<select name="departement">
<option selected="selected">Département</option>
<optgroup id="alsace" style="display:none;" label="Alsace">
<option value="67">(67) Bas-Rhin</option>
<option value="68">(68) Haut-Rhin</option>
</optgroup>
<optgroup id="aquitaine" style="display:none;" label="Aquitaine">
<option value="24">(24) Dordogne</option>
<option value="33">(33) Gironde</option>
<option value="40">(40) Landes</option>
<option value="47">(47) Lot-et-Garonne</option>
<option value="64">(64) Pyrénées-Atlantiques</option>
</optgroup>
<optgroup id="auvergne" style="display:none;" label="Auvergne">
<option value="03">(03) Allier</option>
<option value="15">(15) Cantal</option>
<option value="43">(43) Haute-Loire</option>
<option value="63">(63) Puy-de-Dôme</option>
</optgroup>
<optgroup id="basse_normandie" style="display:none;">
<option value="14">(14) Calvados</option>
<option value="50">(50) Manche</option>
<option value="61">(61) Orne</option>
</optgroup>
<optgroup id="bourgogne" style="display:none;">
<option value="21">(21) Côte-d'Or</option>
<option value="58">(58) Nièvre</option>
<option value="71">(71) Saône-et-Loire</option>
<option value="89">(89) Yonne</option>
</optgroup>
<optgroup id="bretagne" style="display:none;">
<option value="22">(22) Côtes-d'Armor</option>
<option value="29">(29) Finistère</option>
<option value="35">(35) Ille-et-Vilaine</option>
<option value="56">(56) Morbihan</option>
</optgroup>
</select>
Je voudrais en fait faire en sorte que lorsque je choisis une région dans la première liste, alors les département de cette région s'affichent dans la seconde liste.
Je ne sais pas comment faire...
Merci beaucoup de votre aide
A voir également:
- Problème avec html et javascript
- Editeur html - Télécharger - HTML
- Telecharger javascript - Télécharger - Langages
- Br html ✓ - Forum Webmastering
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi ✓ - Forum Javascript
5 réponses
Salut!
voici un petit exemple pris dans ce forum,à toi de l'adapter!il va beaucoup t'aider!
voici un petit exemple pris dans ce forum,à toi de l'adapter!il va beaucoup t'aider!
<html> <head> <script language='javascript'> function actualiser() { form.reset(); } function listerRegionFonctionPays() { i=document.form.pays.selectedIndex; if(i==0) {form.region.options.length=1;} else if(i!=0) { switch(i) { case 1: listeRegion=new Array("Bretagne","Ile-de-France"); break; case 2: listeRegion=new Array("Californie","Denver","Wisconsin","Minnesota"); break; case 3: listeRegion=new Array("Naple","Turin","Rome"); break; } for(i=0;i<listeRegion.length;i++) { el=new Option(listeRegion[i],i+1); form.region.options[i+1]=el; } form.region.length=listeRegion.length+1; } } </script> </head> <body onLoad='actualiser();' background="page_bg_blusteel_011609.gif"> <form name='form' action='suivant.html'> Pays : <select name='pays' onChange='listerRegionFonctionPays();'> <option>Sélectionnez ici</option> <option>France</option> <option>USA</option> <option>Italie</option> </select> <br />Région : <select name='region'> <option>Sélectionnez ici</option> </select> <br /><input type='radio' name='radio1' value='1' onClick='champ(value);' /> Choix 1 <br /><input type='radio' name='radio1' value='2' onClick='champ(value);' /> Choix 2 <br /><input type='radio' name='radio1' value='3' onClick='champ(value);' /> Choix 3 <br /> <br /><span id='idic'></span> <script language='javascript'> function champ(value) { obj=document.getElementById('idic'); obj.innerHTML="Nouveau champ pour le choix "+value+ "<input type='text' name='nomDuChamp'>"; } </script> <br /><input type='submit' value='Suivant' /> </form> </body> </html>
Je ferais ainsi :
1ère étape :
<select name="region" onchange="javascript:RendVisibleDep(this.value)">
devient
<select id="regions" name="region" onchange="javascript:RendVisibleDep(this.id)">
2ème étape dans le javascript :
function RendVisibleDep(id){
var choix = document.getElementById(id).selectedIndex;
var regionChoisie =select.options[choix].value;
document.getElementById(regionChoisie).style.display = "block";
}
Y'a peut-être qqs erreurs de codes mais dans l'ensemble ça doit y ressembler!
1ère étape :
<select name="region" onchange="javascript:RendVisibleDep(this.value)">
devient
<select id="regions" name="region" onchange="javascript:RendVisibleDep(this.id)">
2ème étape dans le javascript :
function RendVisibleDep(id){
var choix = document.getElementById(id).selectedIndex;
var regionChoisie =select.options[choix].value;
document.getElementById(regionChoisie).style.display = "block";
}
Y'a peut-être qqs erreurs de codes mais dans l'ensemble ça doit y ressembler!
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question