Przenoszenie elementów pomiędzy selectami, no właśnie, jak to zrobić ?! Opcje

[tiraeth]

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ę

Zastanawiam się jak to zrobić 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ć...

Ten post edytował Tiraeth 6.04.2005, 12:33:24

[revyag]

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]

Fajne działa, napewno przyda się ) Dzięki

[tiraeth]

To raczej ja powininenem podziękować... THC 4 JS

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);
}

Ten post edytował Tiraeth 6.04.2005, 14:43:39

[cerastes]

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"

[revyag]

czy mozna by prosic o wklejenie tutaj calego kodu jak by to mialo wygladac?

Chodzi Ci o przykład z selectami ?

[HTML] pobierz, plaintext 
<select id="s1">
        <option value="s11">s11</option>
        <option value="s12">s12</option>
        <option value="s13">s13</option>
        <option value="s14">s14</option>
        <option value="s15">s15</option>
    </select><br /><br />
    <select id="s2">
        <option value="s21">s21</option>
        <option value="s22">s22</option>
        <option value="s23">s23</option>
        <option value="s24">s24</option>
        <option value="s25">s25</option>
    </select><br /><br />
    <input type="button" value=">>" onclick="c('s1','s2')"><br /><br />
    <input type="button" value="<<" onclick="c('s2','s1')">
[HTML] pobierz, plaintext 

[cerastes]

dzieki bardzo

[phpion]

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 
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Przenoszenie miedzy selectami</title>
  <meta name="GENERATOR" content="Quanta Plus" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  <style type="text/css">
  /* <![CDATA[ */
 
  /* ]]> */
  </style>
  <script language="javascript" type="text/javascript">
  /* <![CDATA[ */
var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
 
function wyslij(theSel)
{
	var selLength = theSel.length;
	var output = '';
 
	for (i=0; i<selLength; i++)
	{
		output += theSel.options[i].text + ', ';
	}
 
	alert(output);
}
 
function appendOldSchool(theSel, newText, newValue)
{
  if (theSel.length == 0) {
    var newOpt1 = new Option(newText, newValue);
    theSel.options[0] = newOpt1;
    theSel.selectedIndex = 0;
  } else if (theSel.selectedIndex != -1) {
    var selText = new Array();
    var selValues = new Array();
    var selIsSel = new Array();
    var newCount = -1;
    var newSelected = -1;
    var i;
    for(i=0; i<theSel.length; i++)
    {
      newCount++;
      selText[newCount] = theSel.options[i].text;
      selValues[newCount] = theSel.options[i].value;
      selIsSel[newCount] = theSel.options[i].selected;
 
      if (newCount == theSel.selectedIndex) {
        newCount++;
        selText[newCount] = newText;
        selValues[newCount] = newValue;
        selIsSel[newCount] = false;
        newSelected = newCount - 1;
      }
    }
    for(i=0; i<=newCount; i++)
    {
      var newOpt = new Option(selText[i], selValues[i]);
      theSel.options[i] = newOpt;
      theSel.options[i].selected = selIsSel[i];
    }
  }
}
 
function addOption(theSel, theText, theValue)
{
  var newOpt = new Option(theText, theValue);
  var selLength = theSel.length;
  theSel.options[selLength] = newOpt;
}
 
function deleteOption(theSel, theIndex)
{ 
  var selLength = theSel.length;
  if(selLength>0)
  {
    theSel.options[theIndex] = null;
  }
}
 
function moveOptions(theSelFrom, theSelTo)
{
 
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
 
  var i;
 
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--)
  {
    if(theSelFrom.options[i].selected)
    {
      selectedText[selectedCount] = theSelFrom.options[i].text;
      selectedValues[selectedCount] = theSelFrom.options[i].value;
      deleteOption(theSelFrom, i);
      selectedCount++;
    }
  }
 
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--)
  {
	appendOldSchool(theSelTo, selectedText[i], selectedValues[i]);
  }
 
  if(NS4) history.go(0);
}
  /* ]]> */
  </script>
</head>
<body>
 
<form action="selecty.php" method="post">
<table border="0">
	<tr>
		<td>
			<select name="sel1" size="30" multiple="multiple" style="width: 200px;">
			<option value="1">Left1</option>
			<option value="2">Left2</option>
			<option value="3">Left3</option>
			<option value="4">Left4</option>
			<option value="5">Left5</option>
			<option value="6">Right1</option>
			<option value="7">Right2</option>
			<option value="8">Right3</option>
			<option value="9">Right4</option>
			<option value="10">Right5</option>
			</select>
		</td>
		<td align="center" valign="middle">
			<input type="button" value="--&gt;"
			 onclick="moveOptions(this.form.sel1, this.form.sel2);" /><br />
			<input type="button" value="&lt;--"
			 onclick="moveOptions(this.form.sel2, this.form.sel1);" />
		</td>
		<td>
			<select name="sel2" size="30" multiple="multiple" style="width: 200px;">
			</select>
		</td>
	</tr>
</table>
<input type="button" value="Wyslij" onclick="wyslij(this.form.sel2);" />
</form>
 
</body>
</html>
[HTML] pobierz, plaintext 

Ten post edytował phpion.com 1.11.2006, 11:44:55