✔ Formular - Daten aus abhängigem Drop-Down-Menü übernehmen

[altox-de]

Hallo zusammen,
ich habe ein reguläres PHP-Kontakformular erstellt,
in das ich folgende 2 abhängige Dropdowns eingefügt habe:

    <script type="text/javascript">
    
    /* Auswahl im ersten Feld
			 ?      Optionen im zweiten Feld
		          ?*/
    var categories = {
      'Foo' : ['Foo1', 'Foo2', 'Foo3', 'Foo4'],
      'Bar' : ['Bar1', 'Bar2', 'Bar3', 'Bar4'],
      'Baz' : ['Baz1', 'Baz2', 'Baz3', 'Baz4'],
      'Qux' : ['Qux1', 'Qux2', 'Qux3', 'Qux4']
    }
    
    window.onload = function() {
 
			// Das zweite Auswahlfeld mit seinem Initialwert erstellen
			var subSelect = document.createElement('select');
					subSelect.options[0] = new Option('Bitte wählen Sie eine Kategorie aus.', '');

			var catSelect = document.getElementsByTagName('select')[0];
					catSelect.parentNode.appendChild(subSelect); // Zweites Auswahlfeld ins Dokument hängen
					catSelect.onchange = function() {
						var sel = this.options[this.selectedIndex];
						var text = sel.value;

						if (sel.value == '' && sel.innerText) {
							text = sel.innerText;
						}

						genSub(text);
					};

		};

		function genSub(cat) {

			var subSelect = document.getElementsByTagName('select')[1];

			for (var i = subSelect.options.length - 1; i >= 0; --i) {
				subSelect.removeChild(subSelect.options[i]); // Alle bestehenden option-Elemente entfernen
			}

			for (var i = 0; i < categories[cat].length; ++i) {

				// Abhängig von der Auswahl im ersten Auswahlfeld die option-Elemente generieren
				subSelect.options[subSelect.options.length] = new Option(categories[cat][i]);

			}

		}
    
    </script>

Welche Variablen kann ich nun verwenden,
um die Einstellungen der beiden Dropdowns mitzuversenden,
also z.B: Baz => Baz3

Viele Grüße

 

[Matthias Reitinger]

Hallo,

du musst dem dynamisch generierten Auswahlfeld auch ein name-Attribut zuordnen, etwa über subSelect.name = "sub"; Hat es eigentlich einen bestimmten Grund, warum du dieses Feld dynamisch erzeugst? Du könntest es doch auch gleich direkt in das HTML-Dokument einbetten.

Grüße,
Matthias

 

[altox-de]

Hallo, naja - ich denke mir halt, dass es einfacher ist, so den richtigen Weg zum persönlichen Anliegen zu finden.

Habs jetzt hier eingebunden... Klappt aber irgendwie nicht.

window.onload = function() {
 
			// Das zweite Auswahlfeld mit seinem Initialwert erstellen
			var subSelect = document.createElement('select');
					subSelect.options[0] = new Option('und dann hier eine zweite.', '');

			var catSelect = document.getElementsByTagName('select')[0];
					catSelect.parentNode.appendChild(subSelect); // Zweites Auswahlfeld ins Dokument hängen
					catSelect.onchange = function() {
						var sel = this.options[this.selectedIndex];
						var text = sel.value;

						if (sel.value == '' && sel.innerText) {
							text = sel.innerText;
						}

						genSub(text);
					};

		};


subSelect.name = "sub";

		function genSub(cat) {

			var subSelect = document.getElementsByTagName('select')[1];

			for (var i = subSelect.options.length - 1; i >= 0; --i) {
				subSelect.removeChild(subSelect.options[i]); // Alle bestehenden option-Elemente entfernen
			}

			for (var i = 0; i < categories[cat].length; ++i) {

				// Abhängig von der Auswahl im ersten Auswahlfeld die option-Elemente generieren
				subSelect.options[subSelect.options.length] = new Option(categories[cat][i]);

			}

		}
    
    </script>

 

[Matthias Reitinger]

Hallo,

das ganze müsste eher in die Funktion window.onload.

Grüße,
Matthias

 

[altox-de]

perfekt. danke!