Dropdown soll anderes dropdown ändern ohne neuladen...

[Can]

Hi Leute,

also ich habe eine Frage, ob folgendes überhaupt funktionieren kann. Ich habe z.B. 10 dropdown Listen in denen je die Zahlen 1 - 10 stehen. Wenn ich nun dropdown auf 10 stelle, soll automatisch 1 im vorherigen feld 10 stehen. Ist so etwas lösbar.Ich weiß nicht so recht, wie ich das anpacken soll. Ich bin um jeden Tipp dankbar.

[wahsaga]

hi,

also ich habe eine Frage, ob folgendes überhaupt funktionieren kann. Ich habe z.B. 10 dropdown Listen in denen je die Zahlen 1 - 10 stehen. Wenn ich nun dropdown auf 10 stelle, soll automatisch 1 im vorherigen feld 10 stehen. Ist so etwas lösbar.Ich weiß nicht so recht, wie ich das anpacken soll.

Fang damit an:
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onchange
http://de.selfhtml.org/javascript/objekte/options.htm

gruß,
wahsaga

[globe]

n'abend,

also ich habe eine Frage, ob folgendes überhaupt funktionieren kann. Ich habe z.B. 10 dropdown Listen in denen je die Zahlen 1 - 10 stehen. Wenn ich nun dropdown auf 10 stelle, soll automatisch 1 im vorherigen feld 10 stehen. Ist so etwas lösbar.Ich weiß nicht so recht, wie ich das anpacken soll. Ich bin um jeden Tipp dankbar.

leider verstehe ich nicht was du _genau_ machen willst.
Es ist jedoch absolut kein Problem deinem <select> das Attribut onchange hinzuzufügen. onchange ist ein EventListener und wird dann ausgeführt, wenn sich der Inhalt resp. die Auswahl ändert. onchange können wir eine beliebige JavaScript Funktion zuweisen:

<select id="erstes" onchange="aendereZweites(this);">  
  <option value="1">eins</option>  
  <option value="2">zwei</option>  
  <option value="3">drei</option>  
</select>  
<select id="zweites">  
  <option value="a">ich bin ein A</option>  
  <option value="b">ich bin ein B</option>  
  <option value="c">ich bin ein C</option>  
</select>

Dieses Beispiel beschränkt sich auf bekannte und vorhandene Werte für das zweite <select>. Du kannst natürlich auch die <option>s des zweiten (abghängigen) <select>s manipulieren. Eine der uns bereits zur Verfügung stehenden <option>s auszuwählen könnte etwa so passieren:

function aendereZweites( erstesSelect )  
{  
  // zweites (abhängiges) select finden  
  var zweitesSelect = document.getElementById( 'zweites' );  
  
  // eine option auswählen  
  zweitesSelect.selectedIndex = erstesSelect.selectedIndex;  
}

weiterhin schönen abend...

[can]

Hi nochmal,

mein Problem ist das folgende an der Sache. Ich habe also mehrere Dropdown Felder, aber ich möchte dort die Felder in alle Richtungen ändern.

Konkret möchte ich eine Liste mit Bildern neu Ordnen lassen. Die Bilder haben eine fortlaufende Nummer und der User soll dann seine Sortierung ändern können. Das Problem ist für mihc eben, dass ich nciht ganz dainter steige, wie ich alle Felder untereinander verändern kann. Ich habe dein Beispiel soweit verstanden, dass man eine Änderung in Feld 1 macht und diese in Feld 2 etwas ändert. Nun ist die Frage, kann nun das Feld 2 mit der neuen Variable ebenfalls wieder Veränderungen auslösen. Daran scheitere ich momentan gedanklich.

also ich habe eine Frage, ob folgendes überhaupt funktionieren kann. Ich habe z.B. 10 dropdown Listen in denen je die Zahlen 1 - 10 stehen. Wenn ich nun dropdown auf 10 stelle, soll automatisch 1 im vorherigen feld 10 stehen. Ist so etwas lösbar.Ich weiß nicht so recht, wie ich das anpacken soll. Ich bin um jeden Tipp dankbar.

leider verstehe ich nicht was du _genau_ machen willst.
Es ist jedoch absolut kein Problem deinem <select> das Attribut onchange hinzuzufügen. onchange ist ein EventListener und wird dann ausgeführt, wenn sich der Inhalt resp. die Auswahl ändert. onchange können wir eine beliebige JavaScript Funktion zuweisen:

<select id="erstes" onchange="aendereZweites(this);">

<option value="1">eins</option>
  <option value="2">zwei</option>
  <option value="3">drei</option>
</select>
<select id="zweites">
  <option value="a">ich bin ein A</option>
  <option value="b">ich bin ein B</option>
  <option value="c">ich bin ein C</option>
</select>

>   
> Dieses Beispiel beschränkt sich auf bekannte und vorhandene Werte für das zweite <select>. Du kannst natürlich auch die <option>s des zweiten (abghängigen) <select>s manipulieren. Eine der uns bereits zur Verfügung stehenden <option>s auszuwählen könnte etwa so passieren:  
>   
> ~~~javascript

function aendereZweites( erstesSelect )  

> {  
>   // zweites (abhängiges) select finden  
>   var zweitesSelect = document.getElementById( 'zweites' );  
>   
>   // eine option auswählen  
>   zweitesSelect.selectedIndex = erstesSelect.selectedIndex;  
> }

weiterhin schönen abend...

[globe]

n'abend,

Konkret möchte ich eine Liste mit Bildern neu Ordnen lassen. Die Bilder haben eine fortlaufende Nummer und der User soll dann seine Sortierung ändern können. Das Problem ist für mihc eben, dass ich nciht ganz dainter steige, wie ich alle Felder untereinander verändern kann. Ich habe dein Beispiel soweit verstanden, dass man eine Änderung in Feld 1 macht und diese in Feld 2 etwas ändert. Nun ist die Frage, kann nun das Feld 2 mit der neuen Variable ebenfalls wieder Veränderungen auslösen. Daran scheitere ich momentan gedanklich.

du musst der 2. Auswahlliste ebenfalls einen onchange-event-handler verpassen. Ob dieser dann (wie in meinem Beispiel) die nächste Auswahlliste manipuliert, oder die Optionen der vorhergehenden Auswahlliste neu sortiert ist dabei egal.

Um dir konkretere Antworten geben zu können, musst du schon konkretere Fragen stellen und vor Allem mehr Informationen liefern.

weiterhin schönen abend...

[Can]

Servus,

also ich versuch es mal so zu erklären: Ich habe dann also 10 dropdown Listen, alle haben einen Wert gesetzt.

<select id="erstes" onchange="???">
   <option value="1 selected>eins</option>
   <option value="2">zwei</option>
   <option value="3">drei</option>
</select>
<select id="zweites" onchange="???">
   <option value="1">eins</option>
   <option value="2" selected>zwei</option>
   <option value="3">drei</option>
</select>

<select id="drittes" onchange="???">
   <option value="1">eins</option>
   <option value="2">zwei</option>
   <option value="3 selected>drei</option>
</select>

Und diese Dropdown gibt es also so oft, wie ich es brache, z.B 10 mal für zehn Bilder. In jedem Dropdown ist per select eine option gewählt. Nun soll der user als Beispiel im dritten option Block die Eingabe von 3 auf 1 stellen, dann soll im ersten option Block eine drei selektiert werden. Und selbes Spiel soll dann auch für die anderen Dropdown Listen gelten. Ich will quasi, jeden dropdown Eintrag mit einem anderen Tauschen können, der gerade den selben Wert hat. Ich hoffe jetzt ist es etwaws klarer.

Schönen Abend, Can

Konkret möchte ich eine Liste mit Bildern neu Ordnen lassen. Die Bilder haben eine fortlaufende Nummer und der User soll dann seine Sortierung ändern können. Das Problem ist für mihc eben, dass ich nciht ganz dainter steige, wie ich alle Felder untereinander verändern kann. Ich habe dein Beispiel soweit verstanden, dass man eine Änderung in Feld 1 macht und diese in Feld 2 etwas ändert. Nun ist die Frage, kann nun das Feld 2 mit der neuen Variable ebenfalls wieder Veränderungen auslösen. Daran scheitere ich momentan gedanklich.

du musst der 2. Auswahlliste ebenfalls einen onchange-event-handler verpassen. Ob dieser dann (wie in meinem Beispiel) die nächste Auswahlliste manipuliert, oder die Optionen der vorhergehenden Auswahlliste neu sortiert ist dabei egal.

Um dir konkretere Antworten geben zu können, musst du schon konkretere Fragen stellen und vor Allem mehr Informationen liefern.

weiterhin schönen abend...

[globe]

n'abend,

Und diese Dropdown gibt es also so oft, wie ich es brache, z.B 10 mal für zehn Bilder. In jedem Dropdown ist per select eine option gewählt. Nun soll der user als Beispiel im dritten option Block die Eingabe von 3 auf 1 stellen, dann soll im ersten option Block eine drei selektiert werden. Und selbes Spiel soll dann auch für die anderen Dropdown Listen gelten. Ich will quasi, jeden dropdown Eintrag mit einem anderen Tauschen können, der gerade den selben Wert hat. Ich hoffe jetzt ist es etwaws klarer.

na also, geht doch.

ich würde nach dem Laden der Seite alle betreffenden <select>s suchen und in einem Array speichern (für schnelleren Zugriff beim Ändern). Jedem <select> wird ein neues Attribut "oldValue" hinzugefügt, welches den Wert der aktuell gewählten Option zugewiesen bekommt.

Jedes der <select>s bekommt die gleiche Funktion als onchange-event-handler gesetzt. Diese Funktion läuft nun über das <select>-Array, prüft welches der <select> den gleichen Wert hat. Wird ein <select> gefunden, so muss die Option gewählt werden, die dem oldValue des <select>s entspricht, welches geändert wurde. Bei beiden <selects> muss danach der Wert von oldValue auf die neu gewählte Option gesetzt werden.

Probier ein wenig rum und stell ggf. Fragen, wenn du etwas nicht verstehst.

weiterhin schönen abend...

[Can]

Servus,

also das klingt schon mal super cool. Also das heißt für mich jedes Select hat den gleichen Namen und das Array der einzelnen Werte mach e ich alles Java Script? Oder soll das Array schon in PHP  erstellt werden. Wohl kaum, wie ich den Lösungsansatz vrstanden habe. Ich wedrde jetzt auf jeden Fall mal damit weitermachen. Wenn ich darf, mele ich mich, wenn ich etwas nciht verstehe.

Danke Dir!

Und diese Dropdown gibt es also so oft, wie ich es brache, z.B 10 mal für zehn Bilder. In jedem Dropdown ist per select eine option gewählt. Nun soll der user als Beispiel im dritten option Block die Eingabe von 3 auf 1 stellen, dann soll im ersten option Block eine drei selektiert werden. Und selbes Spiel soll dann auch für die anderen Dropdown Listen gelten. Ich will quasi, jeden dropdown Eintrag mit einem anderen Tauschen können, der gerade den selben Wert hat. Ich hoffe jetzt ist es etwaws klarer.

na also, geht doch.

ich würde nach dem Laden der Seite alle betreffenden <select>s suchen und in einem Array speichern (für schnelleren Zugriff beim Ändern). Jedem <select> wird ein neues Attribut "oldValue" hinzugefügt, welches den Wert der aktuell gewählten Option zugewiesen bekommt.

Jedes der <select>s bekommt die gleiche Funktion als onchange-event-handler gesetzt. Diese Funktion läuft nun über das <select>-Array, prüft welches der <select> den gleichen Wert hat. Wird ein <select> gefunden, so muss die Option gewählt werden, die dem oldValue des <select>s entspricht, welches geändert wurde. Bei beiden <selects> muss danach der Wert von oldValue auf die neu gewählte Option gesetzt werden.

Probier ein wenig rum und stell ggf. Fragen, wenn du etwas nicht verstehst.

weiterhin schönen abend...

[globe]

n'abend,

also das klingt schon mal super cool. Also das heißt für mich jedes Select hat den gleichen Namen und das Array der einzelnen Werte mach e ich alles Java Script?

jein. Du wirst die Werte der Auswahllisten wohl später in deinem Script (welches die Angaben im Formular verarbeitet) verarbeiten wollen. Dann ist es vielleicht keine super tolle Idee allen <select>s denselben Namen zu geben.

Du könntest bspw. alle <select>s innerhalb deines Formulars suchen, die die class "sortierung" gesetzt haben. (getElementsByTagName() sowie String.indexOf() könnten hier hilfreich sein...)

Oder soll das Array schon in PHP  erstellt werden. Wohl kaum, wie ich den Lösungsansatz vrstanden habe.

Das wird dir nicht sehr viel bringen, da du mit PHP nur Text (HTML und Javascript) ausgeben kannst, nicht aber (Javascript-)Referenzen auf irgendwelche Objekte im DOM. Eine Möglichkeit zum Suchen der relevanten <select>s findest du oben.

Ich wedrde jetzt auf jeden Fall mal damit weitermachen. Wenn ich darf, mele ich mich, wenn ich etwas nciht verstehe.

Das ist der Sinn der Übung ;)

weiterhin schönen abend...