Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dodawanie pozycji do pola <option>
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
darekpe
Witam

Mam zamontowac na stronie dwa pola <option size=10 multiple> a wiec te "plaskie", nie rozwijane. Nastepnie przez dwuklik na pozycji w jednym oknie ma ona wesolo przeskoczyc do drugiego.
Cel jest taki, zeby uzytkownik klikal sobie na oknie z opcjami, a wszystko co wybral zbieralo sie w drugim okienku.

Z JavaScript jestem cienki, wogole nie wiem jak sie za to zabrac. Bardzo prosze o pomoc, moze podobny kawalek kodu do przerobienia, moze miejsce gdzie warto poszukac? hotscripts.com juz przewalilem.

dziekuje,
darek
nospor
  1. <option size=10 multiple>
smile.gif
Chyba masz na myśli
  1. <select size=10 multiple>


Cytat
moze miejsce gdzie warto poszukac

Tak, u nas na forum. Było juz pare podobnych skryptów
darekpe
Dziekuje, zaraz biore sie za grzebanie w archiwum.

Oczywiscie chodzilo mi o <select>, jeszcze nie mysle trzezwo o tej porze :)

pozdrawiam,
darek
ghostrider
jak masz czas i ochote popracuj troche nadtym, to szkielet jeno, wymaga troche poprawek, szczegolnie pod IE. Kiedys mielismy tego uzyc, ale zmienilismy koncepcje i prace sie zatrzymaly.

  1. <style media="screen" type="text/css">
  2. .selboxa, .selboxb {
  3. width: 150px;
  4. float:left;
  5. }
  6. .selboxb{
  7. float:right;
  8. }
  9. .selboxa select, .selboxb select {
  10. width:150px;
  11. }
  12. .selactions {
  13. float:left;
  14. text-align:left;
  15. }
  16. .selactions input {
  17. width: 60px;
  18. font-family:Verdana, Arial, Helvetica, sans-serif;
  19. font-size:12px;
  20. font-weight:bold;
  21. border:1px solid #999999;
  22. background:white;
  23. margin-bottom:3px;
  24.  
  25. }
  26. #bCtrl {
  27. width: 363px;
  28. text-align:center;
  29.  
  30. }
  31. #bCtrl p{
  32. border: 1px solid #CCCCCC;
  33. background:#FCFCFC;
  34. margin-bottom: 3px;
  35. clear:both;
  36. }
  37. <script language="javascript" >
  38.  
  39. function in_array(neddle, haystack){
  40. for (var i=0; i < haystack.length; i++) {
  41. if (haystack[i] == neddle){
  42. return true;
  43. }
  44. }
  45. return false;
  46. }
  47.  
  48. var LEFT = "boxa";
  49. var RIGHT = "boxb";
  50.  
  51. function select_txtCompare(a, b){
  52. if( a.text > b.text ) return 1;
  53. else if (a.text < b.text) return -1;
  54. else if (a.text == b.text) {
  55. if (a.value > b.value) return 1;
  56. else if(a.value < b.value) return -1;
  57. }
  58. return 0;
  59. }
  60.  
  61. function oneright(){
  62.  
  63. var a = document.getElementById(LEFT);
  64. var b = document.getElementById(RIGHT);
  65. var al = a.length;
  66. var sv = new Array( );
  67. var st = new Array( );
  68. /* collect selected from a box */
  69. for (var i = 0; i < al; i++) {
  70. if (a.options[i].selected) {
  71. sv[sv.length] = a.options[i].value;
  72. st[st.length] = a.options[i].text;
  73. //a.options[i].selected = false;
  74. }
  75. }
  76. /* colect b box */
  77. var bl = b.length;
  78. var bv = new Array( );
  79. var bt = new Array( );
  80. var sl = sv.length;
  81. var opts = new Array( );
  82.  
  83. for ( i = 0; i <bl; i++){
  84. bv[bv.length] = b.options[i].value;
  85. bt[bt.length] = b.options[i].text;
  86. opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
  87. }
  88.  
  89. for (i=0; i<sl; i++){
  90. if ( ! in_array(sv[i], bv) ) {
  91. opts[opts.length] = new Option( st[i], sv[i] );
  92. }
  93. }
  94. b.options.length = 0;
  95. opts.sort(select_txtCompare);
  96.  
  97. for (i=0; i<opts.length; i++) {
  98. b.options[i] = opts[i];
  99. //b.options[i].selected = true;
  100. }
  101. }
  102.  
  103. function oneleft(){
  104. /* colect b box */
  105. var b = document.getElementById(RIGHT);
  106. var bl = b.length;
  107. var bv = new Array( );
  108. var bt = new Array( );
  109. var opts = new Array( );
  110.  
  111. for ( var i=0; i<b.length; i++ ){
  112. if (!b.options[i].selected)
  113. opts[opts.length] = new Option (b.options[i].text, b.options[i].value);
  114. }
  115.  
  116. b.options.length = 0;
  117. opts.sort(select_txtCompare);
  118. for (i=0; i<opts.length; i++) {
  119. b.options[i] = opts[i];
  120. }
  121.  
  122.  
  123.  
  124. }
  125.  
  126. function b_select(){
  127. var b = document.getElementById(RIGHT);
  128. var bl = b.length;
  129. for (var i = 0; i < bl; i++){
  130. b.options[i].selected = true;
  131. }
  132. return true;
  133. }
  134.  
  135. <form name="selects" enctype="application/x-www-form-urlencoded" method="post" onsubmit="return b_select()">
  136. <div id="bCtrl">
  137. <p> this is control, </p>
  138. <div class="selboxa">
  139. <select name="fa[]" size="10" multiple="multiple" id="boxa" onclick="oneright()" >
  140. <option value="a">this is value A</option>
  141. <option value="b">this is value B</option>
  142. <option value="c">this is value C</option>
  143. <option value="d">this is value D</option>
  144. <option value="e1">this is value E</option>
  145. <option value="e2">this is value E</option>
  146. <option value="g">this is value G</option>
  147. <option value="h">this is value H</option>
  148. <option value="i">this is value I</option>
  149. <option value="j">this is value J</option>
  150. <option value="k">this is value K</option>
  151. <option value="l">this is value L</option>
  152. <option value="m">this is value M</option>
  153. <option value="n">this is value N</option>
  154. <option value="o">this is value O</option>
  155. <option value="p">this is value P</option>
  156. </select>
  157. </div>
  158. <div class="selactions">
  159. <br /><input type="button" name="one_right" value="&gt;" onclick="oneright()">
  160. <br /><input type="button" name="all_right" value="&gt;&gt;">
  161. <br />
  162. <br /><input type="button" name="one_left" value="&lt;" onclick="oneleft()">
  163. <br /><input type="button" name="all_left" value="&lt;&lt;">
  164.  
  165.  
  166. </div>
  167. <div class="selboxb">
  168. <select name="fb[]" size="10" multiple="multiple" id="boxb" onclick="oneleft()" onfocus="this.blur()" >
  169. </select>
  170. </div>
  171. <p>send this selects</p> <input type="submit" name="go" value="send this" />
  172. </div>
  173.  
  174. </form>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.