Vorschläge gesucht

pc

Hallo,

ich suche nach einem Lösungsvorschlag für folgendes Problem:
Ich habe eine sehr lange Liste mit Einträgen, die aus der Datenbank geholt werden. Nun soll der Nutzer aus dieser Liste ein oder mehrere Einträge auswählen können. Dabei möchte ich es dem Nutzer ggf. zusätzlich ermöglichen, über eine Schaltfläche(?) alle/keinen Einträg auszuwählen.
Soweit, so gut. Meine erste Idee war ein Select-Feld das Mehrfachauswahl erlaubt. Aber auf den zweiten Blick ist das doch eher ungünstig, da der Nutzer wissen muß, daß er die Shift-Taste drücken muß um nicht alle selektierten Einträge zu verlieren
Meine zweite Idee waren zwei Felder: links eins mit allen noch möglichen Einträgen und rechts eins mit allen gewählten Einträgen (wie z.B. in vielen Mailprogrammen bei Auswahl der Empfängeradressen). Hierbei weiß ich allerdings nicht, ob das ganze über JavaScript zu realisieren ist und wenn ja, ob ich über PHP an alle Einträge der rechten Box rankomme (diese sind ja nicht zwingend selektiert)?

Kann mir da jemand helfen oder hat gar eine ganz andere Lösungsidee?

Vielen Dank,
Petra

Beatz

Hallo Petra,

hört sich etwas komplexer an, Dein Problem, generell kann ich Dir aber sicherlich helfen. Jedoch ist mit der sachliche Zusammenhang nicht nicht 100%ig deutlich.

Wie ist das mit den zwei Checkboxen gemeint, eine rechts und eine links. Welche Box hat welche Funktion?

Grundlegend läßt sich aber dazu sagen, dass es sich in Javascript sicher lösen läßt, es ist nur nicht ganz trivial. Über PHP diese Boxen abfragen, kein Problem.

Ich würde mich über eine etwas detailliertere Beschreibung freuen, da ich Dir so nicht weiter helfen kann.

pc

Ok, ich werde mal versuchen die ganze Sache etwas deutlicher darzustellen.

Mal nebenbei: Das ganze System sieht man häufiger mal ... z.B. bei Outlook Express wenn man aus dem Adressbuch mehrere Empfänger aussucht.

Ich habe eine große Anzahl an Wahlmöglichkeiten für den Nutzer. Da habe ich mir gedacht, daß ich diese in einem mehrzeiligen Select-Feld anzeigen könnte (das linke!). Hier kann sich der Nutzer eine oder mehrere Einträge auswählen. Ist er fertig mit der Auswahl klickt er auf nen Button (in den ganzen Mailprogrammen sind das immer Buttons mit nem Pfeil drauf). Wurde der Button (nach rechts) gedrückt, gehen die gewählten Einträge in das rechte Select-Feld, in dem alle gewählten Einträge drin stehen. Die Einträge die gewählt sind (d.h. im rechten Selec-Feld stehen), sind im linken Select-Feld nicht mehr vorhanden (sonst wird es noch schwerer, wenn man jedesmal vergleichen muß, ob ein gewisser Eintrag bereits gewählt wurde oder nicht)
Will der Nutzer nun einen Eintrag deselektieren (d.h. vom rechten in das linke Feld bekommen), muß er diesen wiederum anklicken und auf einen Button mit einem Pfeil in die andere Richtung klicken.

Im Endeffekt befinden sich im rechten Feld alle gewählten Einträge und im linken Feld die nicht gewählten Einträge.

Code

------------------------                  ---------------------------
I  nicht gewählte      I      -->         I  gewählte Einträge      I
I  Einträge            I      <--         I                         I
------------------------                  ---------------------------

Ja, das war's erstmal, ich hoffe das war etwas verständlicher.
Bist du dir sicher, daß man sich mit PHP alle Einträge eines Select-Feldes holen kann, obwohl sie nicht selected sind? Normalerweise hat man doch nach dem submit nur Zugriff auf die Einträge die selected sind, oder nicht?

Vielen Dank,
Petra

Beatz

Hallo Petra,

vielen Dank, das nenne ich mal eine Klasse Beschreibung eines Problems. Aus dem Kopf kenne ich keine Lösung dafür, werde aber gerne mal etwas rumprobieren.

So ist es natürlich nicht möglich, nicht selektierte Einträke mittels PHP auszulesen, aber wenn Du beide Felder in Summer betrachtest, hast Du ja alle, bzw sogar schon, wenn Du diese dynamisch aufbaust. Es geht doch sicherlich auch nur um die selektierten Einträge?

Werde mich demnächst mal melden ... Mich interessiert das ganze auch.

Beatz

Hallo Petra,

ging doch wesentlich schneller, als ich dachte. Ich habe einfach mal die Schalter weggelassen, Du brauchst nur auf einen Eintrag klicken. Gerne baue ich das aber noch um. Nur ich finde es so bequemer.

HTML

<html>
<head>
  <title>Seitentitel</title>
<script type="text/javascript">
<!--
// Erstellt von Ralf Pfeifer (pfeifer@arstechnica.de, http://www.arstechnica.de)
function WertUebertragen(Quelle, Ziel, Entfernen)
  {
  var WertVorhanden = false
  var ZielVorhanden = (typeof Ziel != "undefined") && (Ziel != null)
  if (!ZielVorhanden)
    {
    Entfernen = true
    }
  for (var Nr = 0; Nr < Quelle.length; Nr++)
    {
    var QuellOption = Quelle.options[Nr]
    if (QuellOption.selected)
      {
      if(ZielVorhanden)
        {
        for (var Pos = 0; Pos < Ziel.length;)
          {
          WertVorhanden = (Ziel.options[Pos++].text == QuellOption.text)
          if (WertVorhanden)
            { break }
          }
        if (!WertVorhanden)
          {
          Ziel.options[Ziel.length] = new Option(QuellOption.text, QuellOption.value)
          }
        }
        if (Entfernen)
          {
          Quelle.options[Nr] = null
          }
      }
    }
  }


function AlleWerteLoeschen(Ziel)
  {
  for (var Nr = Ziel.length; Nr > 0;)
  Ziel.options[--Nr] = null
  }


function Auslesen(ListenFeld)
  {
  var AusgabeText = ""
  for (var Nr = 0; Nr < ListenFeld.length;)
    AusgabeText += ListenFeld.options[Nr++].text + "\n"
  alert (AusgabeText)
  }


//-->
</script>
</head>
<body>
<form action="#" method="POST">
<select name="sel1" size="6" style="width:200px;" onclick="WertUebertragen(this, this.form.sel2, true)">
  <option value="1">Nr. 1</option>
  <option value="2">Nr. 2</option>
  <option value="3">Nr. 3</option>
  <option value="4">Nr. 4</option>
</select>
<select name="sel2" size="6" style="width:200px;" onclick="WertUebertragen(this, this.form.sel1, true)">
</select>
</form>
</body>
</html>

Alles anzeigen

sel1 und sel2 kannst Du natürlich entsprechend umbenennen.

Cyberlord

Hab mal sowas ähnliches gemacht:
Multible SELECT

pc

Hallo Beatz,

das ist ja echt cool Vielen Dank!!!
Es wäre für meinen Fall besser, wenn ich mehrere Einträge mit einem mal rüberkriege, weil in der Liste bis zu 300 Einträge stehen können. Das kann man ja keinem Nutzer zutrauen.
Und unverschämterweise muß ich gleich mal fragen, ob man die alphabetische Reihenfolge beibehalten kann?

Die Sache mit dem Auslesen in PHP ist natürlich immernoch da. Mich interessieren in der Tat nur die selektierten Einträge. Mir schwebt jetzt irgendwas in der Form vor, das man nach dem submit über JavaScript einfach alle Einträge des rechten Felds als selected markiert und schon müßte es gehen!?!

Nochmal danke,
Petra

Beatz

Hallo Petra,

Cyberlord hat ja bereits ein ähnliches Skript gepostet, hätte ich das eher gewußt , womit das geht. Die Liste alphabetisch zu ordnen sollte im Grunde genommen auch gehen. Ich werd mal schauen, ob sich da was machen läßt, kann aber nicht versprechen, ob ich das hinbekomme.

Der Rest mit PHP, zumindest das auslesen ist recht einfach. Wenn Du dann Fragen hast, helfe ich auch gerne weiter!

Cyberlord

Führe einfach eine Schleife aus bei <form onsubmit=".." die alle Einträge vom rechten Menü auf selected setzt und dann submitted wird.

Probiers mal.
Wenn du es nicht schaffst helfe ich dir gerne.

pc

Hallo,

ich habe jetzt eine Version zusammengekriegt die die Einträge alphabetisch sortiert beibehält. Nur funktioniert das ganze leider nicht mit PHP Da ich die Felder aus dem rechten Select-Feld noch mit PHP auslesen will, muß ich dieses als Array definieren. Nur leider funktionieren dann die JavaScript-Sachen nicht mehr.

Code

<select name=select2[] size=10 multiple>

Kann mir jemand sagen, wie ich mit JavaScript auf Select-Felder als Arrays zugreife?

Danke für eure Mühe!!!!!!
Petra

Der Quellcode für die dies interessiert:

PHP

<html>
<head>
<title>Multiple SELECT-List</title>
</head>
<body>
<script language= "JavaScript">
function markAll() {
   var m1 = document.testform.select1;
   var m2 = document.testform.select2;


   m2len = m2.length;
   for (i = 0; i < m2len; i++)
      m2.options[i].selected = true;
}


function einszuzwei() {
   var m1 = document.testform.select1;
   var m2 = document.testform.select2;


   m1len = m1.length;
   for (i = 0; i < m1len; i++) {
      if (m1.options[i].selected == true) {
         m2len = m2.length;
         if (m2len == 0)
            m2.options[0] = new Option(m1.options[i].text);
         else {
            for (y = 0; y < m2len; y++) {
               if (m2.options[y].text > m1.options[i].text) {
                  // ordne Optionsfelder um
                  m2.options[m2len] = new Option(m2.options[m2len-1].text);
                  for (z = (m2len-1); z > y; z--) {
                     m2.options[z].text = m2.options[z-1].text;
                  }
                  m2.options[y].text = m1.options[i].text;
                  break;
               }
            }
            if (m2len == m2.length) //der Eintrag gehört ans Ende der Liste
               m2.options[m2len] = new Option(m1.options[i].text);
         }
      }
   }
   for (i = (m1len-1); i >= 0; i--) {
      if (m1.options[i].selected == true) {
         m1.options[i] = null;
      }
   }
}


function zweizueins() {
   var m1 = document.testform.select1;
   var m2 = document.testform.select2;


   m2len = m2.length ;
   for (i = 0; i < m2len; i++) {
      if (m2.options[i].selected == true) {
         m1len = m1.length;
         if (m1len == 0)
            m1.options[0] = new Option(m2.options[i].text);
         else {
            for (y = 0; y < m1len; y++) {
               if (m1.options[y].text > m2.options[i].text) {
                  // ordne Optionsfelder um
                  m1.options[m1len] = new Option(m1.options[m1len-1].text);
                  for (z = (m1len-1); z > y; z--) {
                     m1.options[z].text = m1.options[z-1].text;
                  }
                  m1.options[y].text = m2.options[i].text;
                  break;
               }
            }
            if (m1len == m1.length) //der Eintrag gehört ans Ende der Liste
               m1.options[m1len] = new Option(m2.options[i].text);
         }
      }
   }
   for (i = (m2len-1); i >= 0; i--) {
      if (m2.options[i].selected == true) {
         m2.options[i] = null;
      }
   }
}
</script>
<form  method="get" name="testform" action='myscript.php'>
<table align=center >
   <tr><td align=center>
    <select name=select1 size=10 multiple>


    </select>


    <p align=center><input type="button" onClick="einszuzwei()" value="auswählen"></p>
    </td><td align=center>
    <select name=select2 size=10 multiple>
       <option value="1">Alpha</option>
       <option value="2">Alphabet</option>
       <option value="3">Ampulle</option>
       <option value="4">Chameleon</option>
       <option value="5">Sport</option>
       <option value="6">Tuch</option>
       <option value="7">Zapfenstreich</option>
    </select>


    <p align=center><input type="button" onClick="zweizueins()" value="abwählen" ></p>
   </td><td><input type="submit" name="OK" onClick='return markAll()'></td></tr>
   <tr><td>   
      <?php
      for ($i = 0; $i < count($select2); $i++)
         echo "Feld $i: $select2[$i]
";
      ?>
   </td></tr>
</table>
<p align=center>Mit STRG meherere Felder auswählen.</p>
</form>
</body>
</html>

Alles anzeigen

Mach eine PHP-Schleife mit dem Array und gib das in JavaScript über.
zB

Code

print "array(0) = .$arr(0)."

oder so ähnlich.

Könnte dir das nur in ASP bzw. VBScript und JavaScript zeigen.

Cyberlord

Oh, hab vergessen mich einzuloggen.
Das war mein Post.

Nochmal genauer:

Code

print "<Script Language='JavaScript'>"
print "array(0) = .$array(0)."
print '</Script>"

Ich hoffe das war Anstoß genug.
Wenn nicht, versuche ich es nochmal genauer mit PHP.

Beatz

Naja, das Problem liegt darin, dass man das Select-Feld mit eckigen Klammern am Ende benennen muss. Und dann mit Javascript nicht vernünftig drauf zugreifen kann. Leider mache ich nicht sonderlich viel in JavaScript. Ich würde jedoch vermuten, dass es mit dem Befehl eval funktioniert, erste Versuche schlugen jedoch fehl. Ich werde mich aber nochmal dran setzen!

Cyberlord

Wieso eckige Klammern?
Lass die eckigen Klammern weg!
Du hast 2 Select-Felder.
select1 und select2
Du übergibst die select-Felder, indem du jeden Eintrag einen value vergibst.
Du bekommst dann auf der nächsten Seite in PHP einen langen String mit den ganzen Werten der ausgewählten Felder.
Diese splittest du mit "," und schon hast du alle Werte im PHP als Array.

cialis

Hi ! Quite smart!-------------------------------Visit this sites for more information about me:Valtrex Valtrex Ultram Ultram Acyclovir Acyclovir Fioricet Fioricet Carisoprodol Carisoprodol Cialis Cialis Levitra Levitra Propecia Propecia Lipitor Lipitor PHENTERMINE - online Phentermine Pharmacy. PHENTERMINE - online Phentermine Pharmacy. Imitrex Imitrex Nexium Nexium Ortho Evra Ortho Evra Ambien Ambien Zyrtec Zyrtec Phentermine Phentermine Adipex Adipex Xenical Xenical x0ogo1d6-101126725

Tags