Select Feld Abhängigkeit

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

  • Select Feld Abhängigkeit

    Hallo Zusammen,

    ich möchte im Select Feld "Standort" einen Standort auswählen und je nach Auswahl die entsprechenden Datenbanken in "SmartMAM DB" anzeigen lassen (Siehe Bild).



    Ich habe das ganze mit festen options probiert und dann über eine if-Abfrage per Javascript und .add/.remove geändert. Hat prima funktioniert.

    Jedoch passiert das Ganze live aus einer SQL Abfrage, wie man auf dem Screen schön sieht. (Beide Select Felder sind bereits gefüllt, jedoch das zweite disabled).

    Nun mein Problem. Ich speichere mir den Inhalt des ersten Select Feldes welches per PHP befüllt wird in meiner JS-Funktion...

    PHP-Code:
    <form id="form1" name="tets" method="post" action="created.php">
        <div align="center">
            <table>
                <tr>
                    <th>Server:</th>
                    <th>Port:</th>
                    <th>Standort:</th>
                    <th>SmartMAM DB:</th>
                </tr>    
                <tr>
                    <th><input type="text" name="Server" placeholder="Enter IP here" /></th>
                    <th><input type="text" name="Port" placeholder="Enter Port here" /></th>
                    <!-- select field Standort -->
                    <th><select id ="StandortSelect" name="Standort" onchange="changeOptionsOnSelect();">
                        <option value="standard">Bitte wählen...</option>
            <?php     //output of Standort from database
                    
    while($row mysqli_fetch_assoc($res)) { ?>
                        <option id ="opt1" value ="<?= $row['oid'?>"><?= $row['oname'?> &ndash; <?= $row['okuerzel'?></option>
            <?php     ?>            
                        </select>
                    </th>
                    <!-- select field SmartMAM DB -->
                    <th><select disabled="disabled" id ="mamDBSelect" name="mamDB">
                        <option value="standard" selected="selected">Bitte wählen...</option>
            <?php     //output of smartmamDB from database        
                    
    while($res mysqli_fetch_assoc($sql)) { ?>
                            <option id ="opt2" value ="<?= $res['oid'?>"><?= $res['mamDB'?></option>
            <?php     ?>
                        </select>
                    </th>                
                </tr>
            </table>
    und versuche dort die ID des ersten Feldes mit der ID des zweiten Feldes abzugleichen. Klappt wunderbar, jedoch will ich das zweite Selectfeld (SmartMAM DB) eben NUR von dem soeben ausgewählten Eintrag abhängig machen. D.h. ich wähle Standort A und bekommen wirklich nur Datenbank A1 und A2 angezeigt.

    js:
    PHP-Code:
    function changeOptionsOnSelect() {
        
        var 
    document.getElementById('StandortSelect');
        var 
    document.getElementById('mamDBSelect');
            
    b.disabled "";
        
    //var option = document.createElement("option");
        
        //prepare Array    
        
    var StandortID = new Array();
        var 
    mamID = new Array();
        
        
        for(var 
    0a.options.lengthi++) {
            
    //alert(a.options[i].value);
            
    StandortID a.options[i].value;
            
    //mamID = b.options[i].value;
            
    for(var 0b.options.lengthk++) {
                
    mamID b.options[k].value;
                if(
    StandortID == mamID) { 
                    
    //option.text = b.options[i].innerHTML;
                    
    b.options.length 4;
                    
    //b.add(option,b.option[k]);
                    
    alert(StandortID " - " mamID);
                }
                else {
                        
    //alert("Keine Einträge gefunden!");
                
    }
            }    
        }
            
    //    b.add(option, b.options[i]);

    Ich komme einfach nicht drauf! Selbst mit .selected oder .selectedIndex bekomme ich keine richtigen Ergebnisse.

    Ich hoffe jemand von euch weiß einen Rat.

    Vielen Dank,

    Simon

  • #2
    Keine Ahnung, ob dir das weiter hilft, aber ich habe mal ein Tutorial zu einem ähnlichen Thema geschrieben. Da geht es um die Manipulation von Select-Elementen in Kombination mit Ajax => Tutorials - DOM-Manipulation JavaScript - Praxistutorial 2 - Einführung

    Gruß
    Peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Danke Dir! Werd ich mir heute mal durchlesen

      Kommentar


      • #4
        so mal ein update.

        Select funktioniert nun einwandfrei (inkl abhängigkeit.)

        Ich hab das Ganze mit testwerten probiert.

        Dazu mal die JS Funktion
        PHP-Code:
        ////
        //build array for SmartMAM DB select fields options
        ////
        var selectOptval = new Array();

        selectOptval[0] = new Array();
        selectOptval[0]["id"] = "0";
        selectOptval[0]["text"] = "Bitte wählen...";
            
        selectOptval[1] = new Array();
        selectOptval[1]["id"] = "2";
        selectOptval[1]["text"] = "A1";
            
        selectOptval[2] = new Array();
        selectOptval[2]["id"] = "5";
        selectOptval[2]["text"] = "B1";
            
        selectOptval[3] = new Array();
        selectOptval[3]["id"] = "5";
        selectOptval[3]["text"] = "B2";

        selectOptval[4] = new Array();
        selectOptval[4]["id"] = "11";
        selectOptval[4]["text"] = "D1";

        selectOptval[5] = new Array();
        selectOptval[5]["id"] = "11";
        selectOptval[5]["text"] = "D2";

        selectOptval[6] = new Array();
        selectOptval[6]["id"] = "11";
        selectOptval[6]["text"] = "D3";

        selectOptval[7] = new Array();
        selectOptval[7]["id"] = "15";
        selectOptval[7]["text"] = "E1";

        function 
        changeOptionsOnSelect() {
            
        //get select field Standort and SmartMam DB
            
        var standortSl document.getElementById('StandortSelect');
            var 
        mamDBSl document.getElementById('mamDBSelect');
                
        mamDBSl.disabled "";
            
            
        //declare variable to set new option text
            
        var optionText document.createElement("option");
            
        //declare variable for option position to start    
            
        var optPosition 1;
            
        //set option size to 1 at the beginning
            
        mamDBSl.options.length 1;
                    
                    
            for(var 
        1<= selectOptval.lengthi++) {
                var 
        mamID selectOptval[i]["id"];
                
                
        //check if the ID is matching
                
        if(standortSl.value == mamID) {

                        
        optionText.text selectOptval[i]["text"];
                        var 
        value selectOptval[i]["id"];
                        
        mamDBSl.options[optPosition++] = new Option(optionText.textvalue);
                            
        //alert(option.text + " -- " + value);
                    //}
                
        }
                else {
                    
        //alert("not matching!");    
                
        }
                
            }
            

        Nun ist mein Problem die werte aus meinem PHP array in der *.php file an mein *.js file zu übergeben.

        I don't know how! Ich habs auf dröfmillionen Arten versucht, bis auf JSON. Sagt mir bitte nicht, dass JSON die einzige Möglichkeit ist, das hinzubekommen.


        Bisheriger Lösungsversuch (aka totaler Mist)
        PHP-Code:
        <script>
        var selectOptval = new Array();

        <?php     foreach($sql as $res) {
                    for(
        $i 0$i 48$i++) {    ?>        
                
                    selectOptval[<?= $i ?>] = new Array();
                    selectOptval[<?= $i ?>]["id"] = "<?= $res['oid'?>";
                    selectOptval[<?= $i ?>]["text"] = "<?= $res['mamDB'?>";
                    //alert(selectOptval[i]["id"]);
            
        <?php         }
                } 
        ?>
        </script>

        Kommentar


        • #5
          JSON wäre zumindest aus meiner Sicht die praktischste Lösung Werte zwischen Javascript und PHP auszutauschen, da PHP die entsprechenden Funktionen bietet, um mit JSON umzugehen.

          Zudem dürfte Dein Code mit JSON auch um einiges schmaler werden.
          MM Newmedia | MeinBlog

          Kommentar


          • #6
            Zitat von b1p Beitrag anzeigen
            I don't know how! Ich habs auf dröfmillionen Arten versucht, bis auf JSON. Sagt mir bitte nicht, dass JSON die einzige Möglichkeit ist, das hinzubekommen.
            Verdammt! Dann muss ich mich da mal einlesen, noch nie benutzt.

            Kommentar


            • #7
              Hi b1p,

              ein PHP-Array direkt an JavaScript zu übergeben, hab' ich zwar auch nicht hingekriegt, aber mit ein bißchen "Kniffel" geht auch das.

              Ein Array in PHP . . .
              PHP-Code:
              <?php
              $namen 
              = array("petra","günter","heinz","olaf");
              ?>
              Das Select-Element mit ID im Formular lässt du leer . . .
              Code:
              <form action="test.php" method="post">
              <select name="auswahl" id="selauswahl">
              </select>
              <input type="submit" name="cmd" />
              </form>
              Unter dem Formular rufst du die JavaScript-Funktion auf und übergibst ihr als Parameter
              PHP-Code, der aus dem Array mittels implode einen kommagetrennten String macht . . .
              Code:
              <script type="text/javascript">
              <!--
              test(<?php echo '"'.implode(",",$namen).'"';?>);
              // -->
              </script>
              Die Javascript-Funktion macht aus dem String wieder ein Array. In einer Schleife werden dann die
              Option-Felder erzeugt, gefüllt und an das Select-Element angehangen . . .
              Code:
              <script type="text/javascript">
              <!--
              function test(para2){
               //Aus dem String ein Array machen
               var namen = para2.split(",");
               for(var i = 0;i<namen.length;i++){
                //In jedem Durchlauf wird ein Option-Feld erzeugt
                var myOption = document.createElement("option");
                //Der angezeigte Option-Text erhält einen Eintrag aus dem Array
                myOption.text = namen[i];
                // Ohne myOption.value wird der Listeneintrag gesendet
                myOption.value = i;
                //Das Select-Element aus dem Formular wird anhand seiner ID ermittelt . . .
                var mySelect = document.getElementById("selauswahl");
                // . . . und das erzeugte Option-Feld wird hinzugefügt
                mySelect.add(myOption);
               }
               return true;
              }
              // -->
              </script>
              Das Ganze im Zusammenhang . . .
              PHP-Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
              <html>
              <head>
              <title>Untitled</title>
              <script type="text/javascript">
              <!--
              function test(para2){
               //Aus dem String ein Array machen
               var namen = para2.split(",");
               for(var i = 0;i<namen.length;i++){
                //In jedem Durchlauf wird ein Option-Feld erzeugt
                var myOption = document.createElement("option");
                //Der angezeigte Option-Text erhält einen Eintrag aus dem Array
                myOption.text = namen[i];
                // Ohne myOption.value wird der Listeneintrag gesendet
                myOption.value = i;
                //Das Select-Element aus dem Formular wird anhand seiner ID ermittelt . . .
                var mySelect = document.getElementById("selauswahl");
                // . . . und das erzeugte Option-Feld wird hinzugefügt
                mySelect.add(myOption);
               }
               return true;
              }
              // -->
              </script>
              </head>
              <body>
              <?php
              $namen 
              = array("petra","günter","heinz","olaf");
              ?>
              <form action="test.php" method="post">
              <select name="auswahl" id="selauswahl">
              </select>
              <input type="submit" name="cmd" />
              </form>
               <script type="text/javascript">
               <!--
               test(<?php echo '"'.implode(",",$namen).'"';?>);
               // -->
               </script>
              <?php
              if(isset($_POST['cmd'])){
               echo 
              $_POST['auswahl'];
              }
              ?>
              </body>
              </html>

              Gruß
              Günni

              Kommentar


              • #8
                Zitat von Guenni61 Beitrag anzeigen
                ein PHP-Array direkt an JavaScript zu übergeben, hab' ich zwar auch nicht hingekriegt, aber mit ein bißchen "Kniffel" geht auch das.
                Das geht auch ohne diesen Nonsense, und nennt sich JSON.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Zitat von wahsaga Beitrag anzeigen
                  Das geht auch ohne diesen Nonsense, und nennt sich JSON.
                  Wurde bereits erwähnt, aber er hat ja gefragt, ob es auch ohne geht, weil er des JSON's nicht mächtig ist.

                  Und ein bißchen Rumtüfteln wird ja wohl erlaubt sein.

                  Kommentar


                  • #10
                    Zitat von Guenni61 Beitrag anzeigen
                    Wurde bereits erwähnt, aber er hat ja gefragt, ob es auch ohne geht, weil er des JSON's nicht mächtig ist.
                    Um eine einzelne Funktion aufzurufen, braucht es nicht besonders viel „Macht“.
                    I don't believe in rebirth. Actually, I never did in my whole lives.

                    Kommentar


                    • #11
                      Guten Morgen und danke Guenni für die Mühe!
                      Ich werds mal auf deine Art probieren. Arbeite nebenbei an nem wichtigeren Projekt, das bis nächsten Mittwoch fertig sein muss, daher kann es sein, dass ichs diese Woche nicht mehr schaffe. Ich sag dir aber Bescheid obs geklappt hat

                      Ansonsten wirds ein json_encode

                      Kommentar


                      • #12
                        Zitat von b1p Beitrag anzeigen
                        Guten Morgen und danke Guenni für die Mühe!
                        Ich werds mal auf deine Art probieren. Arbeite nebenbei an nem wichtigeren Projekt, das bis nächsten Mittwoch fertig sein muss, daher kann es sein, dass ichs diese Woche nicht mehr schaffe. Ich sag dir aber Bescheid obs geklappt hat

                        Ansonsten wirds ein json_encode

                        Hi b1p,
                        auch das ist kein großes Geheimnis. Aus . . .
                        Code:
                        test(<?php echo "'".implode(",",$namen)."'";?>);
                        wird . . .
                        Code:
                        test(<?php echo json_encode($namen);?>);
                        Was du nicht mehr brauchst, ist die eine Zeile, die aus einem String ein Array macht.
                        Du kannst den Parameter direkt verarbeiten, was in diesem Fall wohl keine große Ersparnis ist.

                        Code:
                        function test(para2){
                         for(var i = 0;i<para2.length;i++){
                          //In jedem Durchlauf wird ein Option-Feld erzeugt
                          var myOption = document.createElement("option");
                          //Der angezeigte Option-Text erhält einen Eintrag aus dem Array
                          myOption.text = para2[i];
                          // Ohne myOption.value wird der Listeneintrag gesendet
                          myOption.value = i;
                          //Das Select-Element aus dem Formular wird anhand seiner ID ermittelt . . .
                          var mySelect = document.getElementById("selauswahl");
                          // . . . und das erzeugte Option-Feld wird hinzugefügt
                          mySelect.add(myOption);
                         }
                         return true;
                        }
                        Der Rest, das Erstellen der Optionfelder, bleibt gleich. Und das wars ja, was du wolltest.

                        Gruß
                        Günni

                        Kommentar


                        • #13
                          1000 Dank!

                          Kommentar

                          Lädt...
                          X