Select Feld Abhängigkeit

[b1p]

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...

<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:

function changeOptionsOnSelect() {
    
    var a = document.getElementById('StandortSelect');
    var b = document.getElementById('mamDBSelect');
        b.disabled = "";
    //var option = document.createElement("option");
    
    //prepare Array    
    var StandortID = new Array();
    var mamID = new Array();
    
    
    for(var i = 0; i < a.options.length; i++) {
        //alert(a.options[i].value);
        StandortID = a.options[i].value;
        //mamID = b.options[i].value;
        for(var k = 0; k < b.options.length; k++) {
            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

[Kropff]

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

[b1p]

Danke Dir! Werd ich mir heute mal durchlesen

[b1p]

so mal ein update.

Select funktioniert nun einwandfrei (inkl abhängigkeit.)

Ich hab das Ganze mit testwerten probiert.

Dazu mal die JS Funktion

////
//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 i = 1; i <= selectOptval.length; i++) {
        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.text, value);
                    //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)

<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>

[ezkimo]

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.

[b1p]

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.

[Guenni61]

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
$namen = array("petra","günter","heinz","olaf");
?>

Das Select-Element mit ID im Formular lässt du leer . . .

<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 . . .

<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 . . .

<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 . . .

<!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

[wahsaga]

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.

[Guenni61]

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.

[wahsaga]

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“.

[b1p]

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

[Guenni61]

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 . . .

test(<?php echo "'".implode(",",$namen)."'";?>);

wird . . .

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.

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

[b1p]

1000 Dank!