Auswahllisten in HTML

[bulldoge]

Guten Abend,

ich suche nach einer einfachen Möglichkeit zum erstellen von fünf Auswahllisten, die folgendes erfüllen sollen.

Die erste Auswahlliste soll feste Einträge haben. Das habe ich auch hinbekommen :-)

Die zweite, dritte und vierte Auswahlliste, mit jeweils unterschiedlichen Einträgen sollen über den EventHandler ONCHANGE in Abhängigkeit des "selectedIndex" des ersten Auswahlliste erscheinen.

Vorher sollten die zweite, dritte und vierte Auswahlliste nicht zusehen sein.

Zweck der ganzen Sache ist, dass ich meinen Kunden ein "kleines" onlineshop anbieten möchte, und die dort eingegebenen Daten per Email an micht versandt werden.

Ich habe das Internet schon durchforstet und habe immer "STANDARD" Beispiele gefunden, ich habe auch die Seite:

http://de.selfhtml.org/html/formulare/index.htm

durchgelesen, hat mir leider nichts geholfen. Bitte hilft mir.

bulldog

[Peter Pan]

Hi!

Wo ist der Bezug zu http?

Was hast Du bisher unternommen (Code)?

off:PP

[bulldoge]

Hallo,

Wo ist der Bezug zu http?

sorry ich meinte HTML, bin kein insider :-)

Was hast Du bisher unternommen (Code)?

zum Beispiel einige Teile aus dem Code:

  
<from>  
<select id="auswahl1" name="auswahl1" onchange="a1()">  
   <option value="0">--- Bitte wählen ---</option>  
   <option value="1">Produkt1</option>  
   <option value="2">Produkt2</option>  
   <option value="3">Produkt3</option>  
</select>  
<SCRIPT type="text/javascript" language="JavaScript">  
function a1()  
{  
if (document.getElementById("auswahl1").value=="1")  
{  
document.write("Modell:");  
document.write("<select name='Modell1'>");  
document.write("<option selected value='100'>--- Bitte wählen ---/option>");  
document.write("<option value='101'>Modell1</option>");  
document.write("<option value='102'>Modell2</option>");  
document.write("</select>");  
}  
if (document.getElementById("auswahl1").value=="1")  
{  
document.write("Modell:");  
document.write("<select name='Modell1'>");  
document.write("<option selected value='100'>--- Bitte wählen ---/option>");  
document.write("<option value='101'>Modell1</option>");  
document.write("<option value='102'>Modell2</option>");  
document.write("</select>");  
}  
}  
</script>  
</form>  
und immer weiter so.  

Mein Problem ist, dass document.write  es in ein neues Fenster lädt.
Mit .style.display und .style.visibility hat mir auch nicht geholfen da ich will, dass die werte später in ein Formular übergeben werden sollen.

Vielen Dank für Deine Hilfe.
bulldoge

[Beat]

Dein document.write hilft dir nicht weiter, da dadurch durch änderung des Select-Zustandes nichts geändert werden kann.

Du solltest die Selectboxen ganz normal im HTML schreiben.
Javascript Aufgabe ist dann, zu ermitteln, welche Option der primären Selectbox selected ist, und mit dieser Information die anderen selectboxen zu behandeln:

• ob.style.display="none" bzw "inline"
• ob.dissabled="dissabled" bzw ""

Du hast aber in einem Array das Mapping bereitzustellen, damit klar wird, welche Option auf welche Sekundäre Selectbox mappt.

Dies mal mein Eindruck, ohne reale Erfahrung mit dieser Aufgabe zu haben.

mfg Beat

[bulldoge]

Hallo Beat,

ich habe es auch mit style.display und dissabled ausprobiert, funzt leider nicht.

Gibt es keine einfache Lösung für dieses Problem?

Bin zwar kein Profi, aber ich konnte mir bisjetzt immer helfen, nur jetzt stehe ich total am schlauch.

document.write und document.innerhtml helfen mir ja, wie im vorherigen posting von mir, gar nicht weiter.

trotzdem viele dank, für dein beitrag; ich hoffe aber trotzdem dass mir weitergeholfen werden kann.

ich wäre auch mit ein ganz anderen code einverstanden, es muss ja nicht unbedingt in meinem stil geschrieben sein.

viele grüsse cemil

[Beat]

ich habe es auch mit style.display und dissabled ausprobiert, funzt leider nicht.

Denke daran, dass du diese Eigenschaften zuerst in der Initialisierung setzen musst, damit du in einer if Anweisung darauf testen kannst.

Gibt es keine einfache Lösung für dieses Problem?

Tücken und Abläufe kennen lernen.

document.write und document.innerhtml helfen mir ja, wie im vorherigen posting von mir, gar nicht weiter.

Mit document.innerHtml kannst du immerhin Elemente in den baum einfügen, nachdem der Baum bereits erstellt ist.

mfg Beat

[Mike]

Also ich fass das jetzt mal für dich zusammen:

1. Du erstellst mit html genau so viele Selects wie du max. brauchst; gib ihnen ID's damit du sie schnell mit Javascript ansprechen kannst.

2. Du brauchst einen/mehrere Javascript-Arrays mit den Auswahltexten, die anschließend möglich wären. Am Besten nimmst du multidimensionale Arrays, dann  kannst du die Möglichkeiten besser strukturieren.

3. Bau dir eine Javascript-Funktion, die aufgerufen wird, wenn onchange eintritt. Gut geht das so: <select id="1" onchange="changeit(this.id);" ...>
Dabei bekommt die Funktion gleich die ID des geänderten select mit.

4. Füge je nach Auswahl (mit if und kindelementen des select) die gewünschten options dazu. Dazu brauchst du Schleifen und des oben gennannte DOM.
Ich würde dir dazu schon selfhtml empfehlen ->createElement()/appendChild()

Dann kannst du den Select noch einblenden, siehe: css->display

Gruß Mike

[bulldoge]

Hallo,

habe endlich mal kein neues Problem aber dafür erfreuliche Nachrichten. Habe es mit dem Formular so hinbekommen, wie ich es mir vorgestellt habe.

Die Standardbeispiele, die hier auf SELFHTML sind, sind sehr gut zum lernen, aber wenn man was anderes daraußen machen will ist "Kreativität" gefragt und dank zahlreicher Beispiele hier im SELFHTML habe ich es auch hinbekommen.

Jaja, aber trotzdem vielen Dank an alle die mir Tipps gegeben haben.

Viele Grüße
bulldoge

P.S.
Habe es mit JavaSCRIPT hinbekommen.

[bulldoge]

Denke daran, dass du diese Eigenschaften zuerst in der Initialisierung setzen musst, damit du in einer if Anweisung darauf testen kannst.

Das hatte ich schonmal gemacht. Das Problem dabei ist nur, dass das ganze Formular an eine Emailadresse versendet wird, aber vor dem versenden, eine Abfrage stattfindet, die überprüft ob alle Pflichtfelder ausgefüllt sind.

Dabei ist ja gerade das Problem, wenn ich der zweiten Auswahlliste den ID=Modell verpasse (siehe mein erstes Posting, ID steht zwar da nicht), dass natürlich auch die dritte und die vierten Auswahlliste den gleichen id haben müssen, damit ich zuordenen kann was der kunde bestellt hat.

Bei dem Skript, den ich habe wird dann geprüft ob Modell "ausgewählt" ist, da zum beispiel die zweite auswahlliste angezeigt wird (ich meine das anzeigen mit style.display) und die anderen disabled sind. aber die anderen auswahllisten noch den id=modell haben kommt ja natürlich die fehlermeldung (bei meinem php skript) "Nicht alle Pflichtfelder ausgefüllt."

deswegen habe ich mich doof und dämlich angestellt mit document.write das war ja nicht so verkehrt, aber immerhin hatte er mir dann auch den quellcode richtig ausgegeben und da war auch dann nur der id=modell für ein bestimmtes Produkt angegeben. Leider aber in ein anderem fenster, und dadurch konnte es nicht mehr an mich versendet werden, weil es ganz einfach nicht mehr ein teil des formulars war.

ich sitze bestimmt schon seit zwei tagen an diesem problem, weil ich meine hoffung an javascript nicht aufgeben wollte. aber es scheint doch so zu sein das ich komplett von neu anfangen muss.

Peter Pan hat mit den Tipp gegeben, dass ich die "DOM-API kennen lernen" soll, ich habe mir das bis vorhin angeguckt. Es ist zwar mir aufgefallen, dass es JavaScript ähnelt, aber die ein  und ausblend "funktion" ist mir da nicht aufgefallen.

Wenn Ihr einfache vorschläge für mich habt, wäre ich euch sehr dankbar. Für Ansätze wäre ich euch hundertfach dankbar. Für einen Code, der mir es für ein beispiel anzeigt, wäre ich euch tausendfach dankbar.

viele grüße
cemil

[Peter Pan]

Hi cemil!

Ich finde es gut, dass Du mehrfach nachfragst und die Dir gegebenen Antworten verarbeitest - das ist schon lange nicht mehr üblich: viele Fragsteller hinterlassen nach einer zielführenden Antwort aus dem Forum kein einziges Wort mehr hier.

Fast alle SELFHTML-Aktiven können die Situation, in welcher Du Dich gerade befindest nach empfinden!

Das Erlernen der hier behandelten Themen kann sehr frustrierend sein, da man auf der Suche nach Lösungen für aktuelle (scheinbar winzige) Probleme, auf neue Probleme bzw. Aufgaben stößt.

Web-Entwicklung ist ein weites Feld - es gibt viel zu lernen und das ist sehr zeit-intensiv, auch wenn viele zu erlernende Dinge nicht schwierig zu verstehen sind, aber in der Summe ist es schon ein bißchen;)

Gerade dann, wenn man nicht berufsmäßig, aber doch 'richtig' und gut die verschiedenen Techniken, Sprachen und ja: auch Technologien kennen lernen will, gibt es einiges zu lesen, lernen, probieren, versuchen, fluchen, löschen, aus dem gedächtnis zu streichen, von vorne anzufangen etc.

Das Schlimmste daran: dieses im Laufe von Wochen / Jahren  erlernte Wissen unterliegt einer lachhaften Halbwertszeit hinsichtlich seiner Gültigkeit.

Es ist noch gar nicht so lange her, da hat man noch diskutiert, wie eine Layout-Tabelle zu optimieren, und mit CSS zu garnieren sei - probiere heute mal, _hier_ Empfehlungen für die Gestaltung einer Layout-Tabelle zu erhalten;)

Gib nicht auf, stelle hier wieder konkrete Fragen und mach weiter!

off:PP

[Peter Pan]

Hi bulldoge!

<SCRIPT type="text/javascript" language="JavaScript">

Streiche bitte das language-Attribut, es ist falsch.

document.write("Modell:");

Mit document.write schreibst Du in ein _neues_ HTML-Dokument, welches (je nach User-Agent und dessen Einstellungen) auch in einem neuen Fenster/Tab geöffnet werden kann...

Das willst Du aber nicht, denke ich.

Deshalb solltest Du die DOM-API kennen lernen  - ich empfehle an der Stelle: mal nicht SELFHTML, auch wenn mich hier dafür einige werden steinigen wollen, aber der JS/DOM-Part direkt nebenan ist nicht so meins, bzw. bedarf einer aktuellen Überarbeitung.

off:PP

[Malcolm Beck´s]

hi,

Die zweite, dritte und vierte Auswahlliste, mit jeweils unterschiedlichen Einträgen sollen über den EventHandler ONCHANGE in Abhängigkeit des "selectedIndex" des ersten Auswahlliste erscheinen.

Das klingt stark nach Verketteten Auswahllisten.

Vorher sollten die zweite, dritte und vierte Auswahlliste nicht zusehen sein.

Ob das mit obigem Beispiel geht, weiß ich nicht, kannst ja probieren.

mfg