login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > Formulieren > Inputbox als Select

Inputbox als Select

Auteur: BramBo - 22 januari 2008 - 23:06 - Gekeurd door: Gerard - Hits: 2903 - Aantal punten: 4.00 (1 stem)



Copy paste 

inits :
  1. var dropDown = new Array();
  2. var dropDownAoptions = new Array();
  3. dropDownAoptions[0] = new Array(2, "value");
  4. dropDownAoptions[1] = new Array(4, "waaa");


Aanmaken (beste in 'n window.onload/domLoaded of onder n andere event):
  1. dropDown[0] = new dropDowner('dropDownA', dropDownAoptions);

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Inputbox als Dropdown</title>
  6. <script type='text/javascript'>
  7. var dropDown = new Array();
  8. var dropDownAoptions = new Array();
  9. dropDownAoptions[0] = new Array(2, "value");
  10. dropDownAoptions[1] = new Array(4, "waaa");
  11.  
  12. window.onload = function() {
  13. dropDown[0] = new dropDowner('dropDownA', dropDownAoptions);
  14.  
  15. // add Optie
  16. dropDown[0].addOption(20, "Nog een waarde");
  17.  
  18. /*
  19. uitlezen dropDowners voor wanneer je het formulier gaat verzenden.
  20. Dus zet de waarde van alle velden op de id van de gekozen options.
  21.  
  22. for(var i=0, j=dropDown.length;i<j;i++) dropDown[i].element.value = dropDown[i].selected[0];
  23. */
  24. }
  25.  
  26. function dropDowner(id, options) {
  27. if(id==null||!typeof(id)=="string") return;
  28. this.element = document.getElementById(id);
  29.  
  30. this.id = id;
  31. this.options = new Array();
  32. this.selected = new Array(-1, "");
  33.  
  34. this.addOptions = function(options) {
  35. if(!typeof(options)=="object") return false;
  36. for(var i=0,j=options.length;i<j;i++) {
  37. if(typeof(options[i])=="object") {
  38. this.options[i] = new Array();
  39. this.options[i][0] = options[i][0];
  40. this.options[i][1] = options[i][1];
  41. }
  42. else return false;
  43. }
  44. return true;
  45. }
  46.  
  47.  
  48. this.addOption = function(id, value) {
  49. if(id==null||id<0||value==""||value==null) return false;
  50.  
  51. var l = this.options.length;
  52. this.options[l] = new Array();
  53. this.options[l][0] = id;
  54. this.options[l][1] = value;
  55. return true;
  56. }
  57.  
  58. this.up = function() {
  59. var l = this.options.length, i = this.selected[0];
  60. i = (--i<0) ? --l: i;
  61. this.select(i);
  62. }
  63.  
  64. this.down = function() {
  65. var l = this.options.length, i = this.selected[0];
  66. i = (++i>=l) ? 0: i;
  67. this.select(i);
  68. }
  69.  
  70. this.select = function(id) {
  71. if(id==null||id<0||id>this.options.length) return false;
  72. this.element.value = this.options[id][1];
  73. this.selected[0] = id;
  74. this.selected[1] = this.options[id][1];
  75.  
  76. return true;
  77. }
  78.  
  79. if(typeof(options)=="object") this.addOptions(options);
  80. }
  81.  
  82. </script>
  83. <style type='text/css'>
  84. .dropdown {
  85. background : #fff;
  86. border : 1px solid #838383;
  87. }
  88.  
  89. a, a:hover {
  90. font-weight : bold;
  91. color : #838383;
  92. font-size : 11px;
  93. text-decoration : none;
  94. border : 1px solid #838383;
  95. padding : 2px 5px 2px 5px;
  96. margin : 5px;
  97. }
  98.  
  99. a:hover {
  100. background : #BBB;
  101. text-decoration : underline;
  102. }
  103. </style>
  104. </head>
  105. <body>
  106. <div>
  107. <input type='text' class='dropdown' value='' id='dropDownA' disabled='disabled' /><br />
  108. <a href="javascript:dropDown[0].up();">^</a>
  109. <a href="javascript:dropDown[0].down();">v</a>
  110. </div>
  111. </body>
  112. </html>

Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

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