Selectionner valeur dans une liste déroulante

Selectionner valeur dans une liste déroulante - HTML/CSS - Programmation

Marsh Posté le 05-04-2006 à 16:09:04    

Bonjour,
 
Je fait un mapping sur mon image et pour l'instant je fait un lien vers une autre page mais j'aimerais que à la place ca selectionne un valeur dans une zone déroulante via un javascript...
 
MA liste déroulante resemble à  

Code :
  1. <select name="zone_id">
  2.   <option value="291">Brabant Wallon</option>
  3.   <option value="289">Bruxelles</option>
  4.   <option value="292">Hainaut</option>
  5.   <option value="290">Namur</option>
  6. </select>


 
Mon code actuel

Code :
  1. <map name="FPMap0">
  2.   <area href="Bruxelles" shape="polygon" coords="222, 119, 221, 126, 217, 130, 225, 138, 245, 141, 249, 125, 243, 115, 226, 115">
  3.   <area href="Hainaut" shape="polygon" coords="215, 90, 237, 96, 288, 89, 312, 86, 331, 84, 319, 107, 332, 115, 324">
  4. </map>
  5. <img border="0" src="file://Field_nas1/usrdirs/BV/My%20Pictures/provinces.gif" width="500" height="395" usemap="#FPMap0">


 
Donc je fout le JS sur le onclick mais par contre j'ai besoin d'un ptit coup de main pour la création du JS...
J'ai vu qu'il y a document.MonForm.MaSelection.options[0] mais il faudrait que je fasse mon matching sur la value de l'option dans la liste...
 
D'avance merci
 
Ben
 

Reply

Marsh Posté le 05-04-2006 à 16:09:04   

Reply

Marsh Posté le 05-04-2006 à 17:02:05    

En chipotant un peu j'ai fait ceci:

Code :
  1. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  6. <script language="javascript">
  9. function update_zone(theForm, zid) {
  10.   var NumState = theForm.zone_id.options.length;
  12.   while(NumState >= 0 || theForm.zone_id.options[NumState].value == zid) {
  13.     NumState--;
  14.   }       
  16.   if(theForm.zone_id.options[NumState].value == zid) {
  17. theForm.zone_id.options[NumState];
  18.   }
  19. }
  22. </script>
  23. </head>
  25. <body>
  26. <form id="aa">
  27.    <table border="0" width="100%" cellspacing="0" cellpadding="2">
  28.               <tr>
  29.                 <td class="fieldKey">Zone: </td>
  30.                 <td class="fieldValue">
  31.                 <select name="zone_id">
  32.                   <option value="291">Brabant Wallon</option>
  33.                   <option value="292">Hainaut</option>
  34.                   <option value="290">Namur</option>
  35.                 </select></td>
  36.               </tr>
  37.     <tr>
  38.    <td colspan="2">
  39.    <map name='ZeMap0'>
  40.     <area onclick="update_zone(this.form,292);" shape="polygon" coords="186, 227, 206, 246, 208, 239, 215, 245, 207, 269, 207, 299, 233, 306, 244, 309, 234, 250, 224, 246, 239, 231, 254, 229, 257, 186, 223, 183, 206, 165, 198, 170, 194, 158, 172, 156, 173, 150, 150, 141, 135, 152, 120, 144, 101, 153, 86, 147, 100, 199, 135, 199, 153, 242, 153, 226, 175, 233">
  41.     <area onclick="update_zone(this.form,291);" shape="polygon" coords="255, 188, 227, 183, 207, 165, 199, 169, 196, 159, 206, 148, 217, 153, 236, 148, 270, 141, 299, 142, 302, 145, 308, 142, 312, 147, 307, 170, 280, 176, 269, 173">
  42.     <area onclick="update_zone(this.form,290);" shape="polygon" coords="306, 171, 350, 218, 362, 217, 365, 232, 344, 248, 351, 266, 338, 274, 325, 272, 314, 287, 326, 302, 314, 337, 302, 335, 301, 315, 288, 297, 302, 268, 293, 262, 273, 284, 274, 298, 244, 309, 234, 250, 222, 247, 244, 230, 255, 230, 258, 189, 271, 174, 279, 177">
  43.    </map>
  44.    <img border='0' src='c:/program files/easyphp1-7/www/immo/images/zones_map//provinces.gif' usemap='#ZeMap0'>
  45.    </td>
  46.     </tr>
  47.             </table>
  48. </form>
  49. </body>
  51. </html>


 
Mais il me dit toujours zone_id is null or not allowed...
 
Une idée???

Reply

Marsh Posté le 05-04-2006 à 18:25:49    

Code :
  1. <script>
  2. <!--
  3. function selectionne(num)
  4. {
  5.   var monselect=document.monfrom.maselection;
  6.   for(i=0;i<monselect.length;i++)
  7.     if(monselect.options[i].value==num)
  8.     { monselect.selectedIndex=i; break; }
  9. }
  10. -->
  11. <script>
  13. <map name="FPMap0">
  14. <area onclick="javascript:selectionne(289);return false;" href="Bruxelles" shape="polygon" coords="222, 119, 221, 126, 217, 130, 225, 138, 245, 141, 249, 125, 243, 115, 226, 115">
  15. <area  onclick="javascript:selectionne(292);return false;" href="Hainaut" shape="polygon" coords="215, 90, 237, 96, 288, 89, 312, 86, 331, 84, 319, 107, 332, 115, 324">
  16. </map>


Reply

Marsh Posté le 23-04-2006 à 11:20:26    

mmmh ca marcha pas encore:  
Je fait :  
 

Code :
  1. <html>
  3. <head>
  4. <script language="javascript"><!--
  5.    function selectionne(theForm, num){ 
  6.     var monselect=document.theForm.zone_id; 
  7.     for(i=0;i<monselect.length;i++)   
  8.       if(monselect.options[i].value==num) {
  9.     monselect.selectedIndex=i;
  10.     break;
  11.   }
  12.     }
  14. //--></script>
  15. </head>
  17. <body>
  18. <form id="test">
  19. <select id="zone_id" name="zone_id">
  20.   <option value="291">Brabant Wallon</option>
  21.   <option value="292">Hainaut</option>
  22.   <option value="290">Namur</option>
  23. </select>
  25. <map name='ZeMap0'>
  26.   <area href="javascript:selectionne(this.form,292);" shape="polygon" coords="186, 227, 206, 246, 208, 239, 215, 245, 207, 269, 207, 299, 233, 306, 244, 309, 234, 250, 224, 246, 239, 231, 254, 229, 257, 186, 223, 183, 206, 165, 198, 170, 194, 158, 172, 156, 173, 150, 150, 141, 135, 152, 120, 144, 101, 153, 86, 147, 100, 199, 135, 199, 153, 242, 153, 226, 175, 233">
  27.   <area href="javascript:selectionne(this.form,291);" shape="polygon" coords="255, 188, 227, 183, 207, 165, 199, 169, 196, 159, 206, 148, 217, 153, 236, 148, 270, 141, 299, 142, 302, 145, 308, 142, 312, 147, 307, 170, 280, 176, 269, 173">
  28.   <area href="javascript:selectionne(this.form,290);" shape="polygon" coords="306, 171, 350, 218, 362, 217, 365, 232, 344, 248, 351, 266, 338, 274, 325, 272, 314, 287, 326, 302, 314, 337, 302, 335, 301, 315, 288, 297, 302, 268, 293, 262, 273, 284, 274, 298, 244, 309, 234, 250, 222, 247, 244, 230, 255, 230, 258, 189, 271, 174, 279, 177">
  29. </map>
  30. <img border='0' src='c:/program files/easyphp1-7/www/immo/images/zones_map//provinces.gif' usemap='#ZeMap0'>
  31. </form>
  32. </body>
  34. </html>


 
 
mais il me dit toujours document.theForm.zone_id à la valeur NULL ou n'est pas un objet...


Message édité par the big ben le 23-04-2006 à 11:21:48
Reply

Marsh Posté le 23-04-2006 à 11:46:55    

parceque tu doit mettre:
<form name="theForm" ...>

Reply

Marsh Posté le 23-04-2006 à 11:49:14    

change aussi:

Code :
  1. <script language="javascript"><!--
  2. ...
  3. //--></script>


par:

Code :
  1. <script language="javascript">
  2. <!--
  3. ...
  4. //-->
  5. </script>


pour plus de clarté.

Reply

Marsh Posté le 23-04-2006 à 12:11:21    

Il ne fait effectivement plus l'erreur mais il ne selectionne rien non plus!
 

Code :
  1. <html>
  3. <head>
  4. <script language="javascript">
  5. <!--
  6.    function selectionne(num){ 
  7.     var monselect=document.theForm.zone_id; 
  8.     for(i=0;i<monselect.length;i++) { 
  9.       if(monselect.options[i].value==num) {
  10.     monselect.selectedIndex=i;
  11.     break;
  12.   }
  13. }
  14.    }
  16. //-->
  17. </script>
  18. </head>
  20. <body>
  21. <form name="theForm">
  22. <select id="zone_id" name="zone_id">
  23.   <option value="291">Brabant Wallon</option>
  24.   <option value="292">Hainaut</option>
  25.   <option value="290">Namur</option>
  26. </select>
  28. <map name='ZeMap0'>
  29.   <area href=# onclick="javascript:selectionne(this.form,292);" shape="polygon" coords="186, 227, 206, 246, 208, 239, 215, 245, 207, 269, 207, 299, 233, 306, 244, 309, 234, 250, 224, 246, 239, 231, 254, 229, 257, 186, 223, 183, 206, 165, 198, 170, 194, 158, 172, 156, 173, 150, 150, 141, 135, 152, 120, 144, 101, 153, 86, 147, 100, 199, 135, 199, 153, 242, 153, 226, 175, 233">
  30.   <area href=# onclick="javascript:selectionne(this.form,291);" shape="polygon" coords="255, 188, 227, 183, 207, 165, 199, 169, 196, 159, 206, 148, 217, 153, 236, 148, 270, 141, 299, 142, 302, 145, 308, 142, 312, 147, 307, 170, 280, 176, 269, 173">
  31.   <area href=# onclick="javascript:selectionne(this.form,290);" shape="polygon" coords="306, 171, 350, 218, 362, 217, 365, 232, 344, 248, 351, 266, 338, 274, 325, 272, 314, 287, 326, 302, 314, 337, 302, 335, 301, 315, 288, 297, 302, 268, 293, 262, 273, 284, 274, 298, 244, 309, 234, 250, 222, 247, 244, 230, 255, 230, 258, 189, 271, 174, 279, 177">
  32. </map>
  33. <img border='0' src='../../../program%20files/easyphp1-7/www/immo/images/zones_map/provinces.gif' usemap='#ZeMap0'>
  34. </form>
  35. </body>
  37. </html>

Reply

Marsh Posté le 23-04-2006 à 12:23:20    

change les:
selectionne(this.form,290)
par:
selectionne(290)
 
et ça marche nikel!
 
Edit: ben oouuii selectionne(...) prends un seul argument!


Message édité par nargy le 23-04-2006 à 12:24:24
Reply

Marsh Posté le 23-04-2006 à 12:43:54    

cool merci bcp! cca marche :=)

Reply

Marsh Posté le 23-04-2006 à 15:12:49    

félicitations :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed