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: 7490 - 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
  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
  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.037s