DropDown: 3. Select abhängig von 1. & 2. Select

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DropDown: 3. Select abhängig von 1. & 2. Select

    Hallo Zusammen

    Folgendes Problem: Ich möchte ein bzw. vier von einander abhängige Drop-Down-Menüs in eine Seite einbinden. Im ersten Select kann man zwischen den Sprachen DE/FR/IT/EN auswählen. Im zweiten Select sollen dann nur noch die drei übrigen Sprachen auswählbar sein. Bis dahin funktioniert das ganze wunderbar.

    Nun soll beim dritten aber nur noch die zwei übrigen Sprachen wählbar sein und im letzten nur noch die Sprache, die noch nicht gewählt wurde. Da stehe ich gerade auf dem Schlauch und weiss nicht wie ich dem 3. Select sagen kann, dass er gucken soll, was im 1. und 2. Select gewählt wurde... Kann jemand helfen?

    Unten die beiden Codes vom JS und HTML/PHP... Da sieht man einer meiner Versuche, was natürlich nicht klappt, weil da "de||fr" als ein eigenes Value angesehen wird... ;-) Ich fürchte, dass ich das ganze doch besser mit if-Bedingungen machen sollte...

    Vielen lieben Dank!

    Javascript:
    Code:
    <script language="JavaScript" type="text/javascript">
    var options4Type = [ {},
    { // Options für zweite Selectbox
    "de" : "Deutsch",
    "fr" : "Französisch",
    "it" : "Italienisch",
    "en" : "Englisch",
    "0" : "Keine",
    
    ...
    ... 
    ...
    },
    
    { // Options für dritte Selectbox
    "de" : "Deutsch",
    "fr" : "Französisch",
    "it" : "Italienisch",
    "en" : "Englisch",
    "0" : "Keine",
    
    ... 
    ... 
    ...
    },
    
    { // Options für vierte Selectbox
    "de" : "Deutsch",
    "fr" : "Französisch",
    "it" : "Italienisch",
    "en" : "Englisch",
    "0" : "Keine",
    
    ... 
    ... 
    ...
    }
    ];
    
    var dependentOptions = [ { },
    { // Einschränkung der zweiten Selectbox:
    // Value der ersten Selectbox : gültige Values der zweiten Selectbox
    "de" : "fr,it,en,0", 
    "fr" : "it,en,de,0",
    "it" : "en,de,fr,0",
    "en" : "de,fr,it,0"
    },
    
    { // Einschränkung der dritten Selectbox
    // Value der zweiten Selectbox : gültige Values der dritten Selectbox
    "0" : "0",
    "de||fr" : "it,en,0",
    "de||it" : "fr,en,0",
    "de||en" : "it,fr,0",
    "fr||it" : "de,en,0",
    "fr||en" : "de,it,0",
    "it||en" : "de,fr,0"
    },
    
    { // Einschränkung der dritten Selectbox
    // Value der dritten Selectbox : gültige Values der vierten Selectbox
    "0" : "0",
    "de||fr||it" : "en,0", 
    "de||it||en" : "fr,0",
    "de||en||fr" : "it,0"
    }
    ];
    
    function initPage()
    {
    oMyTypes = [ 
    document.getElementById( "myType1" ), 
    document.getElementById( "myType2" ), 
    document.getElementById( "myType3" ), 
    document.getElementById( "myType4" ) 
    ];
    
    for ( var i = 1; i < oMyTypes.length; i++ )
    for ( var code in dependentOptions[ i ] )
    dependentOptions[ i ](code) = dependentOptions[ i ][ code ].split( "," );      //code steht eigentlich in []
       
       createOptions( 1 );
       createOptions( 2 );
       createOptions( 3 );
      };
       function createOptions( toggleMode )
      {
       var oSelect= oMyTypes[ toggleMode ],
       value = oMyTypes[ toggleMode - 1 ].value;
       
       oSelect.options.length = 0;
       
       for (var i = 0;i < dependentOptions[ toggleMode ][ value ].length; i++ )
       {
        var code = dependentOptions[ toggleMode ][ value ][ i ];
        oSelect.options[ i ] = new Option( options4Type[ toggleMode ][ code ], code )
       }
      }
     </script>
    HTML/PHP:
    Code:
         echo "<tr valign='top'>";
          echo "<td class='zelle2' align='right'>Sprache:</td>";
          echo "<td class='zelle2'>1. <select class='dropdown_laenge' id='myType1' onchange='createOptions( 1 );createOptions( 2 );createOptions( 3 )' size='1' name='Sprache1'>";       
           echo "<option value='de'>Deutsch</option>";
           echo "<option value='fr'>Französisch</option>";
           echo "<option value='it'>Italienisch</option>";
           echo "<option value='en'>Englisch</option>";
           echo "</select><br>";
           
           echo "2. <select class='dropdown_laenge' id='myType2' onchange='createOptions( 2 );createOptions( 3 )' size='1' name='Sprache2'>";
           echo "<option></option>";
           echo "</select><br>";
           
           echo "3. <select class='dropdown_laenge' id='myType3' onchange='createOptions( 3 )' size='1' name='Sprache3'>";
           echo "<option></option>";
           echo "</select><br>";
           
           echo "4. <select class='dropdown_laenge' id='myType4' size='1' name='Sprache4'>";
           echo "<option></option>";
           echo "</select><br>";
           echo "</td>";
          echo "<td class='zelle2' style='color:red; font-size: 11px; font-weight: bold;'>$errorText_Sprache</td>";
         echo "</tr>";
Lädt...
X