Philipp Wanning: Sortieren abhängiger select-Felder

SELF-Forum

Sortieren abhängiger select-Felder

Philipp Wanning
– Informationen zu den Bewertungsregeln

Hallo,

ich habe folgendes Problem:
Ich habe eine Liste, deren Reihenfolge ich gerne vom Nutzer bestimmen lassen möchte.

Ich wollte das so machen:
Vor jeden eine select-Box mit den Einträgen 1-x; die Voreinstellung ist die aktuelle Position.
Nun habe ich z.B. 4 Einträge mit den Positionen 1,4,3,2. Nun möchte ich, dass sich bei der Veränderung einer Box die anderen gleichzeitig verändern.
Das müsste mit JavaScript ja möglich sein; ich besitze leider eine von PHP gepflegte Schwäche gegenüber JavaScript und hätte daher gerne einen Tipp, wie ich das angehen soll.

Vielen Dank im Voraus für Eure Hilfe,

Philipp Wanning

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Sortieren abhängiger select-Felder

    Antje Hofmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Philipp

    Ich wollte das so machen:
    Vor jeden eine select-Box mit den Einträgen 1-x; die Voreinstellung ist die aktuelle Position.
    Nun habe ich z.B. 4 Einträge mit den Positionen 1,4,3,2. Nun möchte ich, dass sich bei der Veränderung einer Box die anderen gleichzeitig verändern.
    Das müsste mit JavaScript ja möglich sein; ich besitze leider eine von PHP gepflegte Schwäche gegenüber JavaScript und hätte daher gerne einen Tipp, wie ich das angehen soll.

    Ja, das ist möglich. Du hast 2 Möglichkeiten zum Vorgehen:

    a) lösche die alten Auswahllisten und erzeuge eine neue Auswahlliste mit der von dir gewünschten Ordnung.

    Mehr dazu unter http://www.teamone.de/selfhtml/tecbbdaa.htm

    b) sortiere einfach die Inhalte z.B. so:

    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    <!--
     function neusortiert(liste)
     {
         //Script tauscht die Positionen 0 und 2

    var merkerValue=liste[0].value;   //alte Werte einlesen
      var merkerText=liste[0].text;

    liste[0].value= liste[2].value;   //Austausch
      liste[0].text= liste[2].text;

    liste[2].value=merkerValue;     //Merkerwert setzen
      liste[2].text=merkerText;

    }
    //-->
    </script>

    </head>
    <body>
    <form action="" method="" target="">
    <select size="1" onchange="neusortiert(this)">
    <option value="1">a1
    <option value="2">a2
    <option value="3">a3
    <option value="4">a4
    <option value="5">a5
    <option value="6">a6
     </select></form>
    </body>
    </html>

    Viele Grüße

    Antje

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Sortieren abhängiger select-Felder

      Philipp Wanning
      – Informationen zu den Bewertungsregeln

      Hallo Antje,

      vielen Dank für Dein Script-Beispiel. Obwohl es nicht ganz mein Problem trifft (Ich habe mehrere Menüs, die aufeinander abgestimmt werden müssen (<-- siehe mein Reply auf Michael Schröpls Antwort), hat nebenbei ein anderes Problem bei mir gelöst.

      vielen dank,
      philipp

      Hallo Philipp

      Ich wollte das so machen:
      Vor jeden eine select-Box mit den Einträgen 1-x; die Voreinstellung ist die aktuelle Position.
      Nun habe ich z.B. 4 Einträge mit den Positionen 1,4,3,2. Nun möchte ich, dass sich bei der Veränderung einer Box die anderen gleichzeitig verändern.
      Das müsste mit JavaScript ja möglich sein; ich besitze leider eine von PHP gepflegte Schwäche gegenüber JavaScript und hätte daher gerne einen Tipp, wie ich das angehen soll.

      Ja, das ist möglich. Du hast 2 Möglichkeiten zum Vorgehen:

      a) lösche die alten Auswahllisten und erzeuge eine neue Auswahlliste mit der von dir gewünschten Ordnung.

      Mehr dazu unter http://www.teamone.de/selfhtml/tecbbdaa.htm

      b) sortiere einfach die Inhalte z.B. so:

      <html>
      <head>
      <title></title>
      <script type="text/javascript">
      <!--
      function neusortiert(liste)
      {
           //Script tauscht die Positionen 0 und 2

      var merkerValue=liste[0].value;   //alte Werte einlesen
        var merkerText=liste[0].text;

      liste[0].value= liste[2].value;   //Austausch
        liste[0].text= liste[2].text;

      liste[2].value=merkerValue;     //Merkerwert setzen
        liste[2].text=merkerText;

      }
      //-->
      </script>

      </head>
      <body>
      <form action="" method="" target="">
      <select size="1" onchange="neusortiert(this)">
      <option value="1">a1
      <option value="2">a2
      <option value="3">a3
      <option value="4">a4
      <option value="5">a5
      <option value="6">a6
      </select></form>
      </body>
      </html>

      Viele Grüße

      Antje

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Sortieren abhängiger select-Felder

    Michael Schröpl
    – Informationen zu den Bewertungsregeln

    Hallo Phillip,

    ich habe folgendes Problem:
    Ich habe eine Liste, deren Reihenfolge ich gerne vom Nutzer bestimmen lassen möchte.

    Wie soll das von der Bedienung her funktionieren? Was soll der Anwender tun können, damit was passiert?

    Ich wollte das so machen:
    Vor jeden eine select-Box mit den Einträgen 1-x;

    Welches Wort fehlt nach "jeden"? (Ich habe Probleme, mir Dein genaues Problem vorstellen zu können.)

    die Voreinstellung ist die aktuelle Position.
    Nun habe ich z.B. 4 Einträge mit den Positionen 1,4,3,2. Nun möchte ich, dass sich bei der Veränderung einer Box die anderen gleichzeitig verändern.

    Mehrere Boxen? Meinst Du wirklich SELECT-Felder (also *ein* Dropdown-Menü etc.), oder etwa Checkboxen?

    • Im ersten Fall hättest Du nur *ein* einziges Dialog-Element (und ich könnte mir nicht vorstellen, wie der Anwender durch Bedienung desselben dessen eigenen Inhalt beschreiben soll),
    • im letzteren Falle zwei, wobei das eine Dialogelement den Zustand des anderen steuert (und das ändert Dein Problem erheblich).

    Das müsste mit JavaScript ja möglich sein; ich besitze leider eine von PHP gepflegte Schwäche gegenüber JavaScript und hätte daher gerne einen Tipp, wie ich das angehen soll.

    Ich hatte vor ein paar Wochen ein ähnliches Problem, das eher der zweiten Möglichkeit Deines Problems entsprach: Ich hatte ein Formular für Suchmaschine, bei welcher der Anwender über ein dropdown-Menü (<INPUT TYPE=SELECT>) spezifizieren kann, in welchem Datenuniversum gesucht werden soll; weitere Dialogelemente (u. a. auch eine weitere SELECT-Liste) waren zur Beschreibung weiterer Suchparameter erforderlich (z. B. um anzugeben, wie die Sucheingabe zu interpretieren war).
    Ursprünglich hatten wir das ungefähr so gelöst, wie Antje das skizziert hat, also den onChange-Event des ersten Auswahl-Elements abgefangen und dann per JavaScript die übrigen Dialogelemente dynamisch neu mit Werten versehen.
    Da diese Suchfunktion aber *sechs* verschiedene Suchmaschinen (von z. T. ganz unterschiedlichen Servern und mit sehr unterschiedlichen Optionen, vor allem mit unterschiedlich vielen Optionen) unter einer einheitlichen Oberfläche integrieren sollte, paßte das alles nur mäßig (eigentlich hätten wir dynamisch viele Dialogelemente haben wollen), und der JavaScript-Code wurde auf die Dauer kolossal unübersichtlich.

    Da in unserem Produkt vorgegeben war, daß das Eingabeformular dieser Multi-Suche in einem eigenen Frame dargestellt werden sollte, fanden wir schließlich einen ganz anderen Weg, der unsere Anforderung eleganter löste: Wir teilten den Frame in ein Frameset aus zwei Frames auf, und bei jeder Änderung des ersten SELECT-Elements (in dem einen Frame) wurde per JavaScript-Code der komplette Inhalt des anderen Frames (also der "Rest" des Formulars, inklusive Submit-Button) neu geladen.
    Dieses Formular mußte sich jetzt "nur noch" in seinem onSubmit-Event den Wert des ersten SELECT-Elements (welches ja in einem anderen Frame steht!) beschaffen und in ein HIDDEN-Feld kopieren, und fertig war die Laube. (Am Ende habe ich dann noch eingebaut, daß eine Eingabe per "return" im linken Frame - der ein Texteingabefeld enthält -, die ja ein onSubmit auf das dortige Rumpf-Formular bewirkt, per JavaScript-Call implizit einen onSubmit-Event im rechten Frame mit dem eigentlichen Formular auslöst, also die Suche im anderen Frame startet ...)

    Viele Grüße
          Michael

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Sortieren abhängiger select-Felder

      Philipp Wanning
      – Informationen zu den Bewertungsregeln

      Hallo Michael,

      zuerst vielen Dank für Deine Antwort. Die schlechte Beschreibung meines Problems tut mir leid. Ich versuchs nochmal.

      ich habe folgendes Problem:
      Ich habe eine Liste, deren Reihenfolge ich gerne vom Nutzer bestimmen lassen möchte.

      Wie soll das von der Bedienung her funktionieren? Was soll der Anwender tun können, damit was passiert?

      Ich wollte das so machen:
      Vor jeden eine select-Box mit den Einträgen 1-x;

      Welches Wort fehlt nach "jeden"? (Ich habe Probleme, mir Dein genaues Problem vorstellen zu können.)

      OK. Folgendes:
      Ich habe drei select-Dropdown-Menüs.

      <select size="1">
      <option value="1" select>Position 1
      <option value="2">Position 2
      <option value="3">Position 3
      </select>

      <select size="1">
      <option value="1">Position 1
      <option value="2" select>Position 2
      <option value="3">Position 3
      </select>

      <select size="1">
      <option value="1" select>Position 1
      <option value="2">Position 2
      <option value="3" select>Position 3
      </select>

      Wenn nun ein Benutzer das dritte Menü auf 1 setzt soll automatisch das erste auf 2 und das zweite auf 3 geschrieben werden.

      Das würde dann wieder in die Datenbank gelangen und auf der Website für eine Sortierung innerhalb eines Menüs sorgen.

      die Voreinstellung ist die aktuelle Position.
      Nun habe ich z.B. 4 Einträge mit den Positionen 1,4,3,2. Nun möchte ich, dass sich bei der Veränderung einer Box die anderen gleichzeitig verändern.

      Mehrere Boxen? Meinst Du wirklich SELECT-Felder (also *ein* Dropdown-Menü etc.), oder etwa Checkboxen?

      • Im ersten Fall hättest Du nur *ein* einziges Dialog-Element (und ich könnte mir nicht vorstellen, wie der Anwender durch Bedienung desselben dessen eigenen Inhalt beschreiben soll),
      • im letzteren Falle zwei, wobei das eine Dialogelement den Zustand des anderen steuert (und das ändert Dein Problem erheblich).

      Ich hoffe, meine Erklärung erklärt tatsächlich.

      Philipp

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Sortieren abhängiger select-Felder

        Michael Schröpl
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich habe drei select-Dropdown-Menüs.

        <select size="1">
        <option value="1" select>Position 1
        <option value="2">Position 2
        <option value="3">Position 3
        </select>

        <select size="1">
        <option value="1">Position 1
        <option value="2" select>Position 2
        <option value="3">Position 3
        </select>

        <select size="1">
        <option value="1" select>Position 1
        <option value="2">Position 2
        <option value="3" select>Position 3
        </select>

        kein MULTIPLE (http://www.teamone.de/selfhtml/tchd.htm#a2), aber trotzdem mehrere Einträge selektiert? Interessant ...
        (Außerdem heißt die Vorauswahl SELECTED statt SELECT, siehe http://www.teamone.de/selfhtml/tchd.htm#a3)

        Wenn nun ein Benutzer das dritte Menü auf 1 setzt soll automatisch das erste auf 2 und das zweite auf 3 geschrieben werden.

        Das ist ein Beispiel, aber keine vollständige Algorithmus-Beschreibung.

        Was meinst Du mit "geschrieben werden"?
        Geht es Dir darum, die *auswählbaren* Werte innerhalb der beiden anderen SELECT-Listen zu ändern (dafür hat Antje die Lösung angegeben),
        oder willst Du nur die *getroffene Auswahl* ändern (das geht ziemlich ähnlich, siehe http://www.teamone.de/selfhtml/tecbbdaa.htm#a6)?

        Viele Grüße
              Michael

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln