login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Formulieren > [JS] Switch items

[JS] Switch items

Auteur: Stijn - 03 februari 2006 - 23:10 - Gekeurd door: nemesiskoen - Hits: 7473 - Aantal punten: 4.25 (2 stemmen)




Eerst en vooral kon ik geen passende titel bedenken Maar hier is de installatie:

1) Maak een formulier met een name/id
2) Maak 2 list boxes en geef die een name/id
3) maak 2 knoppen voor naar de ene en naar de andere te slepen (of course :-))

vragen? PM me dan

thanks to Haytjes for in_array function 

Code:
switch.js
php code - Bekijk de code zonder highlighting - Klap code in 
  1. Array.prototype.in_array = function (element) // Thanks to Haytjes
  2. {
  3.   var retur = false;
  4.   for (var values in this) 
  5.   {
  6.     if (this[values] == element) 
  7.     {
  8.       retur = true;
  9.       break;
  10.     }  
  11.   }
  12.   return retur;
  13. };
  14.  
  15.  
  16. function transport(form, source, target)
  17. {
  18.   var Items = new Array();
  19.   var Index = new Array();
  20.   var T_Items = new Array();
  21.  
  22.   for( var i = 0 ; i < document.forms[form].elements[target].length ; i++) {
  23.     T_Items[ T_Items.length ] = document.forms[form].elements[target].options[i].value;
  24.   }
  25.  
  26.   //put in array
  27.   for( var i = 0 ; i < document.forms[form].elements[source].length ; i++ ) {
  28.     if(document.forms[form].elements[source].options[i].selected) {
  29.       Items[ Items.length ] = new Array( document.forms[form].elements[source].options[i].text , document.forms[form].elements[source].options[i].value);
  30.       Index[ Index.length ] = i;
  31.  
  32.     }
  33.   }
  34.  
  35.   //put the values in the target :D
  36.   for( var i = 0 ; i < Items.length ; i++ ) {
  37.     if(T_Items.in_array(Items[i]) == false) {
  38.       document.forms[form].elements[target].options[ document.forms[form].elements[target].length ] = new Option( Items[i][0] , Items[i][1] );
  39.     }
  40.   }
  41.  
  42.   //destroy in the source
  43.   for( var i = Index.length ; i > 0 ; i-- )
  44.   {
  45.     document.forms[form].elements[source].remove( Index[i-1] );
  46.   }
  47.  
  48. }


Voorbeeld.htm
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2. <head>
  3. <script language="javascript" src="switch_list.js"></script>
  4. </head>
  5. <body>
  6. <form name="myForm" method="post" action="switch.htm">
  7. <table cellpadding="0" cellspacing="3" border="0" width="70%" align="center">
  8.  
  9. <tr>
  10. <td width="40%" align="center" style="font-weight:bold;">Good Stuff</td>
  11. <td width="20%">&nbsp;</td>
  12. <td width="40%" align="center" style="font-weight:bold;">Bad Stuff</td>
  13. </tr>
  14.  
  15. <tr>
  16. <td width="40%" align="center">
  17.  
  18. <select name="box1" size="10" multiple="multiple">
  19. <option value="Een site over sites">Sitemasters</option>
  20. <option value="Site voor de php freaks onder ons">PHPFreakz</option>
  21. <option value="Moederborden">Asus</option>
  22. <option value="Processor bedrijf">Intel</option>
  23. <option value="Tegenhanger van Intel">AMD</option>
  24. </select>
  25.  
  26. </td>
  27. <td width="20%" align="center" valign="middle">
  28.  
  29. <input type="button" value="&gt;&gt;" onclick="transport('myForm', 'box1', 'box2');" />
  30. <br /><br />
  31. <input type="button" value="&lt;&lt;" onclick="transport('myForm', 'box2', 'box1');" />
  32.  
  33. </td>
  34. <td width="40%" align="center">
  35.  
  36. <select name="box2" size="10" multiple="multiple">
  37.   <option value="Speel muziek/film etc af">Windows Media Player</option>
  38.   <option value="Rijke gast">Bill Gates</option>
  39.   <option value="Bedrijf waar windows wordt gemaakt">Microsoft</option>
  40.   <option value="Beginnelingen">Noobs</option>
  41. </select>
  42.  
  43. </td>
  44. </tr>
  45. </table>
  46.  
  47. </form>
  48. </body>
  49. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (4)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.033s