2 Auswahllisten (Select), aber...

[Gauner]

Hallo,

sorry, ich weiß mich jetzt nicht auszudrücken.

Ich schreibe es mal so: Ich möchte in einem HTML-Formular 2 Auswahllisten erstellen.
Von Auswahlliste Nr2 soll sich der Auswahlinhalt ändern, sobald von Auswahlliste Nr1. was anderes gewählt wurde.

Beispiel:

Ich erstelle eine Auswahlliste mit der Auswahl Deutschland, Österreich und Schweiz. In der zweiten Auswahlliste erstelle ich als mögliche Angaben die Bundesländer bzw. Kantons.

Das heißt, wenn ich Deutschland wähle, soll in der zweiten Auswahlliste die Bundesländer aufgeführt werden. Wenn ich aber Schweiz wähle, sollen nur die Kantons der Schweiz aufgeführt sein.

Hoffentlich hab ich mich nicht zu kompliziert ausgedrückt. Ist sowas mit reinem HTML möglich? Kann mir jemand vielleicht ein kleines Beispiel zeigen, wie ich das umsetze?

 

[alogheo]

<script>
function changeTwo()
{
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  if(one.value = "e")
  { /* Wenn Wert des 1. select-menüs = "e", dann den inhalt entsprechend ändern */
    two.innerHTML = '<option name="r">fuzguhilkugjhtdxcgv</option>' +
                    '<option name="f">giuhijoi</option>';
  }
/* else if(one.value="...")... (usw.) */
}
</script>





<form>
 <select onchange="changeTwo()" id="one">
  <option>Bitte wählen</option>
  <option name="e">zuffjvb</option>
  <option name="t">ugzfhjvjbk</option>
 </select>
 <select id="two">
  <option name="r">fuzguhilkugjhtdxcgv</option>
  <option name="f">giuhijoi</option></select>
</form>

 

[Gauner]

Vielen Dank! Also geht das nur mit JS? Gibt es auch eine PHP-Version davon?

 

[threadi]

Nein, wenn Du die Änderung der zweiten Auswahlliste ohne Abschicken des Formulars erreichen willst.
Ja, wenn Du das Formular in dem die Auswahllisten stehen abschicken willst.

 

[mermshaus]

Suchbegriffe: „two level select ajax“, „chain select“, „chained select“.

 

[Gauner]

Danke euch! :)

 

[concret24]

<script>
function changeTwo()
{
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  if(one.value = "e")
  { /* Wenn Wert des 1. select-menüs = "e", dann den inhalt entsprechend ändern */
    two.innerHTML = '<option name="r">fuzguhilkugjhtdxcgv</option>' +
                    '<option name="f">giuhijoi</option>';
  }
/* else if(one.value="...")... (usw.) */
}
</script>





<form>
 <select onchange="changeTwo()" id="one">
  <option>Bitte wählen</option>
  <option name="e">zuffjvb</option>
  <option name="t">ugzfhjvjbk</option>
 </select>
 <select id="two">
  <option name="r">fuzguhilkugjhtdxcgv</option>
  <option name="f">giuhijoi</option></select>
</form>

Stehe grade vor dem Selben Problem. Der Code oben macht für mich soweit Sinn, allerdings habe ich 6 Auswahlmenüs. Ich würde jetzt spontan sagen, dass der Code um var three - six erweitert werden muss. Und wie ist das wenn ich eine Option bei einer bestimmten Angabe wegfallen lassen will? heißt es dann " <option name="r"></option> " ?Bevor ich jetzt groß probiere frag ich mal eben nach es kann ja sein, dass ich es doch falsch verstanden habe.

 

[concret24]

So es scheint als hätte ich tatsächlich was falsch verstanden denn folgender Code funktioneirt nicht :

function changeTwo()
{
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var three = document.getElementById("three");
  var four = document.getElementById("four");
  var five = document.getElementById("five");
  var six = document.getElementById("six");
  var seven = document.getElementById("seven");
  var eight = document.getElementById("eight");
  
  if(one.value = "a")
  { 
    two.innerHTML = '<option name="a">0,00 EUR</option>' +
                    '<option name="b">bis 15.000,00 EUR</option>' +
                    '<option name="c">bis 25.000,00 EUR</option>' +
                    '<option name="d">bis 49.950,00 EUR</option>' +
                    '<option name="e">ab 49.950,00 EUR</option>';
  }
  else if (one.value = "b")
  {     
    two.innerHTML = '<option name="a">bis 15.000,00 EUR</option>' +
                    '<option name="b">bis 25.000,00 EUR</option>' +
                    '<option name="c">bis 49.950,00 EUR</option>' +
                    '<option name="d">ab 49.950,00 EUR</option>' +
                     '<option name="e"></option>';
  }

}

Die 0,00 EUR bleiben bei a als auch b bestehen. Der Plan ist dass sie garnicht auftauchen.

 

[threadi]

Mit so vielen Kombinationsmöglichkeiten müsstest Du das Script viel flexibler gestalten. Einfach die Variablen-Definitionen zu kopieren wird da nicht reichen. Ich würde dir empfehlen sowas mit AJAX zu realisieren (wurde oben schon angesprochen). Wenn in einem Feld sich etwas ändert, dann wird ein Request an den Server erzeugt der als Response dann den Inhalt der anderen Felder zurück liefert die sich dadurch ändern.

 

[concret24]

Ich habe mich also nach Ajax TuT's umgeschaut und unter anderem dieses hier gefunden Ajax Beispiel 002 . Ich denke, dass sich meine Aufgabe ähnlich lösen lassen wird. Oder meint ihr, dass es einfacher geht? Ich selber hab noch keine Ahnung davon.

 

[threadi]

Ja, auf der Basis ließe sich sicherlich etwas gutes zusammenbauen.

 

[concret24]

Guten Morgen,
danke bin schonmal happy, dass ich irgendeine vorlage habe auch wenn sie offensichtlich in eine andere Richtung geht. Leider ist der Code an sich ziemlich verwirrend da ich mich mit soetwas nun noch garnicht beschäftigt habe.

// Request senden request.send('name='+value);

sehe ich das richtig dass hier Name und die Id mitgeschickt werden? Und würde es genügen wenn ich bei den selectboxen lediglich die ID mitschicke?

Die Blöcke"Überprüfen ob request erzeugt wurde" und "Request auswerten" hätte ich gerne genau erklärt. Warum müssen beim letzteren überhaupt diese Zahlen erzeugt werden?