[Javascript]

quicksilver · 9. Oktober 2007

Ich habe ein Script mit dem ich in 2 Auswahlboxen habe. Ich möchte von der Linken auswahlbox per button in die rechte box die "werte" verschieben können. Und möchte dann per klick die werte rechts versenden. Aber das kommt später.
Mein Problem ist nun die Sortierung beim wieder zurückschreiben und nach dem Klick.
Wenn ich die werte zur rechten seite hinzufüge oder aus der rechten Seite wieder lösche mit dem 2. Button werden die werte leider nicht wieder in die Optgroups gepackt.

Kann mir da jemand helfen? Wäre Super !

Code:

<!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" xml:lang="en" lang="en">

<head>
<style type="text/css"><!--

.cat {
  font-weight: bold;
  color: #000000;
}

//--></style>

  <title></title>
</head>

<script language="JavaScript" type="text/javascript">
function Selektion(ursprungListe, zielListe)
{
   var erhalten = new Array();
   var selektiert = new Array();
   var andereListe = new Array();

   //---------------------------------------------------------

   for (var i = 0; i < ursprungListe.options.length; i++)
   {
      with (ursprungListe.options[i])
      {
         if (selected == true)
         {
            selektiert.push(new Array(text, value));
         }
         else
         {
            erhalten.push(new Array(text, value));
         }
      }
   }

   for (var i = 0; i < zielListe.options.length; i++)
   {
      with (zielListe.options[i])
      {
         andereListe.push(new Array(text, value));
      }
   }

   for (var x in selektiert) andereListe.push(selektiert[x]);

   //--------------------------------------------------------------

   erhalten = Sortieren(erhalten);
   andereListe = Sortieren(andereListe);

   //--------------------------------------------------------------

   ursprungListe.options.length = 0;
   zielListe.options.length = 0;

   for (var x in erhalten)
   {
      var myText = erhalten[x][0];
      var myValue = erhalten[x][1];

      if (myValue == '') myValue = myText;
      ursprungListe.options[x] = new Option(myText, myValue);
   }

   for (var x in andereListe)
   {
      var myText = andereListe[x][0];
      var myValue = andereListe[x][1];

      if (myValue == '') myValue = myText;
      zielListe.options[x] = new Option(myText, myValue);
   }
}

function Sortieren(liste)
{
   var sortierteListe = liste;

   var erneut = true;

   while (erneut)
   {
      erneut = false;

      for (var i = 0; i < sortierteListe.length  - 1; i++)
      {
         var a = sortierteListe[i][0];
         var b = sortierteListe[i+1][0];

         a = a.toLowerCase();
         b = b.toLowerCase();

         if (a > b)
         {
            var speicher = sortierteListe[i+1];
            sortierteListe[i+1] = sortierteListe[i];
            sortierteListe[i] = speicher;

            erneut = true;
         }
      }
   }

   return sortierteListe;
}

function Abschicken(mehrere, daten, formular)
{
   if (!mehrere)
   {
      VersandVorbereiten(daten);
   }
   else
   {
      for (var i = 0; i < daten.length; i++) VersandVorbereiten(daten[i], formular);
   }

   formular.submit();
}

function VersandVorbereiten(daten, formular)
{
   var abschickwerte = new Array();

   for (var i = 0; i < daten['liste'].options.length; i++)
   {
      var myOption = daten['liste'].options[i];
      var wert = (myOption.value != '') ? myOption.value : myOption.text ;
      abschickwerte.push(wert);
   }

   var speicherfeld = document.createElement('INPUT');
   speicherfeld.type = 'hidden';
   speicherfeld.name = daten['speicher'];
   formular.appendChild(speicherfeld);
   speicherfeld.value = abschickwerte.join('|-|-|-|');
}
</script>
<body>

<form action="zielseite.php" method="post">
<table>
  <tr>
    <td>
      <select size="8" name="linke_spalte">
        <optgroup label="Bar Department">
        <option value="Barmanager">Barmanager</option>
        <option value="Barkeeper">Barkeeper</option>
        <option value="Decksteward">Decksteward</option>
        </optgroup>
        <optgroup label="Administration">
        <option value="Chief Purser">Chief Purser</option>
        <option value="Fronst Desk Manager">Fronst Desk Manager</option>
        <option value="Receptionist">Receptionist</option>
      </optgroup>
      </select>
    </td>
    <td style="vertical-align: middle;">
      <input type="button" value="--->" onclick="Selektion(this.form.linke_spalte, this.form.rechte_spalte);">
      <br>
      <input type="button" value="<---" onclick="Selektion(this.form.rechte_spalte, this.form.linke_spalte);">
    </td>
    <td>
      <select size="8" name="rechte_spalte">
      </select>
    </td>
  </tr>
</table>



</form>


</body>

</html>

mitos · 9. Oktober 2007

hmm, die Lösung ist zwar nicht sehr elegant aber du könntest es so realisieren:

<option id="1" value="Barmanager" style="display:none">Barmanager</option>

Jenachdem, wo sich der Wert befindet schaltest du ihn auf display:none oder eben dann wieder z.B. So:

document.getElementById('1').style.display='block'; auf sichtbar

dann verschiebst du das ganze nichtmal hin und her sondern lässt es einfach dort anzeigen wo dus braucht, und es bleibt immer sortiert...

mfg
mitos

Suche

quicksilver

Lt. Junior Grade

mitos

Gast

Ähnliche Themen