Idee gesucht, Auswahlliste mehrere Werte merken

[hawkmaster]

Hallo zusammen,
auf einem Formular gibt es zwei Auswahllisten.
Das linke "sel_products" listet Werte auf.
Das rechte "sel_options" ist leer und ist "multiple".
Wenn man auf die linke Auswahlliste klickt werden per JS im rechten die dazugehörigen Werte angezeigt.
Beispiel:
Klick auf "Farben" in "sel_products" zeigt rechts
Gelb
Grün
Rot
Blau

Klick auf "Autos" zeigt rechts "Audi", "VW", "Opel" an.

Wenn man nun in "sel_options" z.b. Gelb, Rot und Blau markiert sollen diese Werte irgendwie zwischengespeichert werden.
Bei einem Klick auf Autos wird rechts "VW" markiert. Auch dieser Wert soll zwischengespeichert werden.

Ziel:
Bei abschließenden Submit auf dem Formular sollen alle markierten Optionen mit dazugehörigem Produkt und anderen Werten aus Textfeldern in einer DB gespeichert werden.
Ich bin mir nicht sicher, ob sich so etwas realisieren lässt?

Bin für jeden Tipp dankbar.

``
<select name="sel_products" size="10" onclick = "showproperties(this.options.selectedIndex);" >
<option value="4">Farben</option>
<option value="5">Autos</option>
</select>
[/code]

vielen Dank und viele Grüße
hawk

[EKKi]

Mahlzeit hawkmaster,

Wenn man nun in "sel_options" z.b. Gelb, Rot und Blau markiert sollen diese Werte irgendwie zwischengespeichert werden.

Wo "zwischengespeichert"?

Ziel:
Bei abschließenden Submit auf dem Formular sollen alle markierten Optionen mit dazugehörigem Produkt und anderen Werten aus Textfeldern in einer DB gespeichert werden.

Aha. Dann speichere die gewählten Optionen doch in entsprechenden <http://de.selfhtml.org/html/formulare/versteckte.htm#definieren@title=versteckten Feldern> - entweder für jede mögliche Option in "sel_products" ein einzelnes, oder eins für alle.

Du musst Dir dann nur noch Gedanken über die Art das Format der "Zwischenspeicherung" machen. Wenn Du z.B. als serverseitige Programmiersprache PHP benutzt, um das Formular auszuwerten, böte sich eine entsprechende Form der Serialisierung an.

MfG,
EKKi

[hawkmaster]

Hallo EKKI,

danke für deine Hilfe

Du musst Dir dann nur noch Gedanken über die Art das Format der "Zwischenspeicherung" machen. Wenn Du z.B. als serverseitige Programmiersprache PHP benutzt, um das Formular auszuwerten, böte sich eine entsprechende Form der Serialisierung an.

ich dachte eigenlich zuerst an Zwischenspeichern in einer Session
ABer wie kann ich mit Javascript in einer Session auf dem Server speichern?

vielen Dank und viele Grüße
hawk

[EKKi]

Mahlzeit hawkmaster,

danke für deine Hilfe

Gern geschehen - allerdings hatte Der Martin eine viel bessere Idee ...

ich dachte eigenlich zuerst an Zwischenspeichern in einer Session
ABer wie kann ich mit Javascript in einer Session auf dem Server speichern?

Gar nicht. Jedenfalls nicht direkt. Höchstens auf dem Umweg über AJAX. Aber wieso solltest Du das? Wieso von hinten durch die Brust ins Auge sich selbst ins Knie schießen, wenn's doch viel einfacher und eleganter geht?

MfG,
EKKi

[Der Martin]

Hallo,

auf einem Formular gibt es zwei Auswahllisten.
Das linke "sel_products" listet Werte auf.
Das rechte "sel_options" ist leer und ist "multiple".
Wenn man auf die linke Auswahlliste klickt werden per JS im rechten die dazugehörigen Werte angezeigt.
Beispiel:
[...]
Wenn man nun in "sel_options" z.b. Gelb, Rot und Blau markiert sollen diese Werte irgendwie zwischengespeichert werden.
Bei einem Klick auf Autos wird rechts "VW" markiert. Auch dieser Wert soll zwischengespeichert werden.
Bei abschließenden Submit auf dem Formular sollen alle markierten Optionen mit dazugehörigem Produkt und anderen Werten aus Textfeldern in einer DB gespeichert werden.

diese Art der Benutzer-Interaktion ist, so wie ich es sehe, tatsächlich nicht ohne Javascript möglich. Ich würde den Effekt aber dennoch etwas anders umsetzen.
Ich würde für jeden möglichen Eintrag aus sel_products eine eigene Optionen-Auswahlliste erstellen (also sel_options_brand, sel_options_color, ...) und mit Javascript abhängig von der Auswahl in der ersten Liste alle bis auf eine unsichtbar machen (display:none).

Vorteil: Jede Unterkategorie hat ihr "eigenes" select-Element. Du brauchst dir um das Zwischenspeichern keinen Kopf zu machen, das regelt HTML für dich. Du brauchst auch nicht über das Absenden nachzudenken; beim Absenden des Formulars werden die Werte *aller* Listen mitgeschickt.

Positiver Nebeneffekt: User ohne Javascript sehen alle Listen gleichzeitig. Das sieht vielleicht nicht so schick aus, aber so lässt sich das Formular dennoch ohne Einschränkungen bedienen.

So long,
 Martin

[EKKi]

Mahlzeit Der Martin,

Positiver Nebeneffekt: User ohne Javascript sehen alle Listen gleichzeitig. Das sieht vielleicht nicht so schick aus, aber so lässt sich das Formular dennoch ohne Einschränkungen bedienen.

Stimmt. Hawkmaster, streiche meinen Vorschlag und mach's lieber so, wie Der Martin vorschlug. Ist sinnvoller.

MfG,
EKKi

[peterS.]

gruss hawk,

Bin für jeden Tipp dankbar.

dann mal los, ich plaediere auch in diesem fall dafuer, ersteinmal zu
versuchen, die daten im html-code und nicht in einem JavaScript-objekt
abzubilden.
koennen kategorien z.b. unabhaengig voneinander dargestellt werden,
boete sich eine in zwei ebenen verschachtelte ungeordnete liste an:

<form ... >  
  ...  
  <ul class="categoryRange">  
    <li><!-- class="category" //-->  
      <fieldset>  
        <legend>Automarke</legend>  
        <ul class="optionRange">  
          <li><!-- class="option" //-->  
            <label><input type="checkbox" .../>Volkswagen</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>Opel</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>Ford</label>  
          </li>  
        </ul>  
      </fieldset>  
    </li>  
    <li>  
      <fieldset>  
        <legend>Farbauswahl</legend>  
        <ul class="optionRange">  
          <li>  
            <label><input type="checkbox" .../>rot</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>gruen</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>blau</label>  
          </li>  
        </ul>  
      </fieldset>  
    </li>  
    <li>  
      <fieldset>  
        <legend>Kategoriename</legend>  
        <ul class="optionRange">  
          <li>  
            <label><input type="checkbox" .../>Option 1</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>Option 2</label>  
          </li>  
          ...  
        </ul>  
      </fieldset>  
    </li>  
    ...  
  </ul>  
  ...  
</form>

dann noch mit css aufhuebschen. soll die darstellung kompakter
erfolgen (kategorien z.b. als navigationsreiter und immer nur
eine kategorie anzeigen), muss man zumindest beim msie 6 noch
mit etwas JavaScript nachhelfen - bei den anderen tut auch dort
reines css.

hat man es hingegen zusaetzlich bzw. ausschliesslich mit voneinander
abhaengigen daten zu tun, gilt es abzuwaegen zwischen datenmenge und
einer vernuenftigen visualisierung ebenjener daten und deren abhaengigkeiten.

wieviel JavaScript muss/darf (nicht) sein? soll es eine skriptlose
alternative im falle einer favorisierten JavaScript-lastigen loesung
geben?

waeren denn, wie in der beispielhaft gewaehlten abhaengigkeit
"Automarke/Modell", gruppierte auswahllisten eine loesung?:

<form ... >  
  ...  
  <ul class="categoryRange">  
    <li><!-- class="category" //-->  
      <fieldset>  
        <legend>Automarke/Modell</legend>  
        <select name="model" size="12" multiple="multiple">  
          <optgroup label="Volkswagen">  
            <option label="Polo">Polo</option>  
            <option label="Golf">Golf</option>  
            <option label="Passat">Passat</option>  
          </optgroup>  
          <optgroup label="Opel">  
            <option label="Corsa">Corsa</option>  
            <option label="Astra">Astra</option>  
            <option label="Insignia">Insignia</option>  
          </optgroup>  
          <optgroup label="Ford">  
            <option label="Fiesta">Fiesta</option>  
            <option label="Focus">Focus</option>  
            <option label="Mondeo">Mondeo</option>  
          </optgroup>  
        </select>  
      </fieldset>  
    </li>  
    <li>  
      <fieldset>  
        <legend>Farbauswahl</legend>  
        <ul class="optionRange">  
          <li>  
            <label><input type="checkbox" .../>rot</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>gruen</label>  
          </li>  
          <li>  
            <label><input type="checkbox" .../>blau</label>  
          </li>  
        </ul>  
      </fieldset>  
    </li>  
    ...  
  </ul>  
  ...  
</form>

der einfache ansatz haelt den programmieraufwand auf der clientseite
so gering wie moeglich. alle getroffenen auswahlen sind vom scripting
unabhaengig, jederzeit nachvollziehbar und immer direkt zum absenden
bereit.

so long - peterS. - [e-mail]