Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Przenoszenie elementów pomiędzy selectami
Forum PHP.pl > Forum > Po stronie przeglądarki
tiraeth
6.04.2005, 12:25:30
Witam, mam problem gdyż piszę system downloadu, i jedną z rzeczy jaka musi być w nim zawarta to wybór plików, które mogą być uploadowane w danej kategorii. Typy tych plików muszą być wybierana podczas tworzenia kategorii.
No i teraz chciałbym zrobić, żeby to wyglądało tak:
Kod
Wybór plików:                     Akceptowane typy:
+------------------+              +------------------+
| Audio            |              |                  |
|   .mp3           |              |                  |
|   .wav           |              |                  |
|   .ogg           |    ------    |                  |
|   .wma           |   |  >>  |   |                  |
|                  |    ------    |                  |
| Video            |              |                  |
|   .avi           |    ------    |                  |
|   .dat           |   |  <<  |   |                  |
|   .mpeg          |    ------    |                  |
|   .wmv           |              |                  |
|                  |              |                  |
|    Wszystkie     |              |                  |
|                  |              |                  |
|                  |              |                  |
+------------------+              +------------------+


Chodzi mi o te dwa przyciski >> i << chciałbym aby po nacisnięciu tego pierwszego, zaznaczony element (option) z select'u select1 został dodany jako nowa pozycja do selectu obok - select2, oraz usunięty z select1. Przycisk drugi miałby robić to samo ale w drugą stronę smile.gif

Zastanawiam się jak to zrobić biggrin.gif Proszę o pomoc...

Aha, jeszcze nie wiem jak po nacisnięciu przycisku BUTTON zrobić tak aby zaznaczyło cały select2, aby wybrane typy zostały przesłane poprzez $_POST, co do wyslania formularza z BUTTON to wiem jak to zrobić...
revyag
6.04.2005, 13:29:44
Kod
function c(from,to){
    var x=document.getElementById(from);
    var y=document.getElementById(to);
    y.options[y.length] = new Option(x.options[x.selectedIndex].text,x.selectedIndex.value);
    x.remove(x.selectedIndex);
}

Funkcja przerzuca zaznaczony option z selecta "from" do selecta "to" i usuwa go z selecta "from".
Aha, option jest dodawany na końcu selecta.
ganimedes
6.04.2005, 14:06:59
Fajne działa, napewno przyda się smile.gif) Dzięki
tiraeth
6.04.2005, 14:30:18
To raczej ja powininenem podziękować... THC 4 JS smile.gif

Lekko go ulepszyłem pod względem wizualnym:
Kod
function c(from,to)
{
   var x=document.getElementById(from);
   var y=document.getElementById(to);
   y.options[y.length] = new Option(x.options[x.selectedIndex].text,x.selectedIndex.value);
   x.remove(x.selectedIndex);
}
cerastes
13.04.2005, 23:32:58
Witam

czy mozna by prosic o wklejenie tutaj calego kodu jak by to mialo wygladac? mecze sie juz nad tym od kilku dni i kompletnie nic mi nie wychodzi :/ z gory dziekuje za zyczliwe podejscie do "nowego" smile.gif
revyag
14.04.2005, 08:38:12
Cytat(cerastes @ 2005-04-13 23:32:58)
czy mozna by prosic o wklejenie tutaj calego kodu jak by to mialo wygladac?

Chodzi Ci o przykład z selectami ?
[HTML] pobierz, plaintext 
  1. <select id="s1">
  2.         <option value="s11">s11</option>
  3.         <option value="s12">s12</option>
  4.         <option value="s13">s13</option>
  5.         <option value="s14">s14</option>
  6.         <option value="s15">s15</option>
  7.     </select><br /><br />
  8.     <select id="s2">
  9.         <option value="s21">s21</option>
  10.         <option value="s22">s22</option>
  11.         <option value="s23">s23</option>
  12.         <option value="s24">s24</option>
  13.         <option value="s25">s25</option>
  14.     </select><br /><br />
  15.     <input type="button" value=">>" onclick="c('s1','s2')"><br /><br />
  16.     <input type="button" value="<<" onclick="c('s2','s1')">
[HTML] pobierz, plaintext
cerastes
14.04.2005, 22:29:32
dzieki bardzo smile.gif
phpion
1.11.2006, 10:54:19
Odswiezam.
Czy daloby sie zmodyfikowac skrypt tak, zeby przenosil dane z jednego pola do drugiego we wskazane miejsce? Tj. np z s1 za aktualnie zaznaczony element w s2?
EDIT:
I moze jeszcze jedna modyfikacja: zeby obslugiwal pola multiple czyli pozwalal na przenoszenie kilku wartosci na raz. Nie wiem nawet pod jakim haslem szukac - prosilbym o nakierowanie mnie.

Ssss jednak na nic mi sie to przyda :/
Moze przy okazji: czy daloby sie przeslac do skryptu php wszsytkie dane (obojetnie czy indexy czy wartosci) znajdujace sie w drugim selectcie? Zakaldam ze to bylaby jakas funkcja przypisujaca do zmiennej (np. stringa) wszystkie wartosci.

=============================================

Znalazlem odpowiednie skrypciki, polaczylem je w calosc i PRAWIE dzialaja poprawnie. Mozna przenosic po kilka pozycji na raz, mozna dodawac dane we wskazane miejsce, mozna dane przeslac do php (funkcja wyslij()). Jednak jest pewien maly problem. Otoz przenoszenie danych powoduje przeniesienie wskazanych danych + pustych pol w ilosci rownej liczbie przenoszonych pol. Nie wiem jak sie tego pozbyc. Przy wysylaniu danych przez wyslij() te puste pola nie sa juz pokazywane. Mialby ktos jakis pomysl?
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.   <title>Przenoszenie miedzy selectami</title>
  7.   <meta name="GENERATOR" content="Quanta Plus" />
  8.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  9.   <style type="text/css">
  10.   /* <![CDATA[ */
  11.  
  12.   /* ]]> */
  13.   </style>
  14.   <script language="javascript" type="text/javascript">
  15.   /* <![CDATA[ */
  16. var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
  17.  
  18. function wyslij(theSel)
  19. {
  20. 	var selLength = theSel.length;
  21. 	var output = '';
  22.  
  23. 	for (i=0; i<selLength; i++)
  24. 	{
  25. 		output += theSel.options[i].text + ', ';
  26. 	}
  27.  
  28. 	alert(output);
  29. }
  30.  
  31. function appendOldSchool(theSel, newText, newValue)
  32. {
  33.   if (theSel.length == 0) {
  34.     var newOpt1 = new Option(newText, newValue);
  35.     theSel.options[0] = newOpt1;
  36.     theSel.selectedIndex = 0;
  37.   } else if (theSel.selectedIndex != -1) {
  38.     var selText = new Array();
  39.     var selValues = new Array();
  40.     var selIsSel = new Array();
  41.     var newCount = -1;
  42.     var newSelected = -1;
  43.     var i;
  44.     for(i=0; i<theSel.length; i++)
  45.     {
  46.       newCount++;
  47.       selText[newCount] = theSel.options[i].text;
  48.       selValues[newCount] = theSel.options[i].value;
  49.       selIsSel[newCount] = theSel.options[i].selected;
  50.  
  51.       if (newCount == theSel.selectedIndex) {
  52.         newCount++;
  53.         selText[newCount] = newText;
  54.         selValues[newCount] = newValue;
  55.         selIsSel[newCount] = false;
  56.         newSelected = newCount - 1;
  57.       }
  58.     }
  59.     for(i=0; i<=newCount; i++)
  60.     {
  61.       var newOpt = new Option(selText[i], selValues[i]);
  62.       theSel.options[i] = newOpt;
  63.       theSel.options[i].selected = selIsSel[i];
  64.     }
  65.   }
  66. }
  67.  
  68. function addOption(theSel, theText, theValue)
  69. {
  70.   var newOpt = new Option(theText, theValue);
  71.   var selLength = theSel.length;
  72.   theSel.options[selLength] = newOpt;
  73. }
  74.  
  75. function deleteOption(theSel, theIndex)
  76. { 
  77.   var selLength = theSel.length;
  78.   if(selLength>0)
  79.   {
  80.     theSel.options[theIndex] = null;
  81.   }
  82. }
  83.  
  84. function moveOptions(theSelFrom, theSelTo)
  85. {
  86.  
  87.   var selLength = theSelFrom.length;
  88.   var selectedText = new Array();
  89.   var selectedValues = new Array();
  90.   var selectedCount = 0;
  91.  
  92.   var i;
  93.  
  94.   // Find the selected Options in reverse order
  95.   // and delete them from the 'from' Select.
  96.   for(i=selLength-1; i>=0; i--)
  97.   {
  98.     if(theSelFrom.options[i].selected)
  99.     {
  100.       selectedText[selectedCount] = theSelFrom.options[i].text;
  101.       selectedValues[selectedCount] = theSelFrom.options[i].value;
  102.       deleteOption(theSelFrom, i);
  103.       selectedCount++;
  104.     }
  105.   }
  106.  
  107.   // Add the selected text/values in reverse order.
  108.   // This will add the Options to the 'to' Select
  109.   // in the same order as they were in the 'from' Select.
  110.   for(i=selectedCount-1; i>=0; i--)
  111.   {
  112. 	appendOldSchool(theSelTo, selectedText[i], selectedValues[i]);
  113.   }
  114.  
  115.   if(NS4) history.go(0);
  116. }
  117.   /* ]]> */
  118.   </script>
  119. </head>
  120. <body>
  121.  
  122. <form action="selecty.php" method="post">
  123. <table border="0">
  124. 	<tr>
  125. 		<td>
  126. 			<select name="sel1" size="30" multiple="multiple" style="width: 200px;">
  127. 			<option value="1">Left1</option>
  128. 			<option value="2">Left2</option>
  129. 			<option value="3">Left3</option>
  130. 			<option value="4">Left4</option>
  131. 			<option value="5">Left5</option>
  132. 			<option value="6">Right1</option>
  133. 			<option value="7">Right2</option>
  134. 			<option value="8">Right3</option>
  135. 			<option value="9">Right4</option>
  136. 			<option value="10">Right5</option>
  137. 			</select>
  138. 		</td>
  139. 		<td align="center" valign="middle">
  140. 			<input type="button" value="--&gt;"
  141. 			 onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
  142. 			<input type="button" value="&lt;--"
  143. 			 onclick="moveOptions(this.form.sel2, this.form.sel1);" />
  144. 		</td>
  145. 		<td>
  146. 			<select name="sel2" size="30" multiple="multiple" style="width: 200px;">
  147. 			</select>
  148. 		</td>
  149. 	</tr>
  150. </table>
  151. <input type="button" value="Wyslij" onclick="wyslij(this.form.sel2);" />
  152. </form>
  153.  
  154. </body>
  155. </html>
[HTML] pobierz, plaintext
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.