• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

2. Dropdown unsichtbar machen

C

Commu

New member
Hallo an die Gemeinde,

ich habe ein fertiges Script für 2 von einander abhängige Dropdowns
PHP: 
<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            function update_auswahl() {
                var kat_select = document.forms.folder.kat;
                var ukat_select = document.forms.folder.u_kat;
                ukat_select.options.length = 0;
                if (kat_select.options[kat_select.selectedIndex].value == "select") {
                    ukat_select.options[0] = new Option("...");
                } else if (kat_select.options[kat_select.selectedIndex].value == "Email") {
                    ukat_select.options[0] = new Option("Software");
                    ukat_select.options[1] = new Option("Anbieter");
                } else if (kat_select.options[kat_select.selectedIndex].value == "Internet") {
                    ukat_select.options[0] = new Option("Internetzugang");
                    ukat_select.options[1] = new Option("Webseiten erstellen");
                }
            }
        </script>
</head>

<body>
    <form name="folder" method="POST">
        <select size="1" name="kat" onchange="update_auswahl()">
            <option value="select" selected>select</option>
            <option value="Email">Email</option>
            <option value="Internet">Internet</option>
        </select>
        <select size="1" name="u_kat">
            <option selected>...</option>
        </select>
        <input type="submit" name="senden" value="senden">
    </form>
    
<?php

    if(isset($_POST["senden"])) {
        echo $_POST["kat"].'</br>';
        echo $_POST["u_kat"];
    } 

?>
</body>
</html>
ich möchte das das 2. Dropdown unsichtbar machen, solange die Auswahl des ersten Dropdown auf 'select' steht.
Könnte mir da jemand helfen?

Danke und Gruß Jörg
 
Versuch doch mal mit php-schnipsel:

if(erstes Menü auf select)
{
$sichbarkeit = "none";
}

und in Dein Dropdown-Menü 2 machst Du folgendes:

Code: 
[B][COLOR="#FF0000"]<option style="display:<? echo $sichbarkeit; ?>"[/COLOR][/B]

        <select size="1" name="kat" onchange="update_auswahl()">
            <option value="select" selected>select</option>
            <option value="Email">Email</option>
            <option value="Internet">Internet</option>
        </select>

[B][COLOR="#FF0000"]</option>[/COLOR][/B]

Sollte eigentlich funktionieren...

LG, Karin
 
Ich denke eher, dass es in Richtung "onchange" beim SELECTBOX1 geht, um SELECTBOX2 zu aktivieren. Da biste mit PHP weit von weg (mind. die Instanz, in der es läuft ). :)

Lösungsvorschlag (ich bin nur noch mit jQuery unterwegs - "Normalo"-JavaScript kann ich schon fast gar nimmer):
[ A ] Attribut "disabled" - dann ist die Box sichtbar, aber nicht bedienbar. Bei "onchange" von SB1 entnimmst Du das Attribut.

[ B ] CSS-Klasse für "display:none; visibility:hidden;" (wer nicht weiß, warum man beides nehmen soll: bitte fragen, statt zu lästern!), welche standarisiert gesetzt ist und bei "onchange" dann schlichtweg entfernt wird.

[ C ] "onchnage" triggert einen AJAX-Request, der die neue Box SB2 ins DOM zufügt und dann erst verfügbar wird.

Wie sagt mein Kollege immer? "Viele Wege führen nach Rom ... " ... :)
 
danke erst mal für die Antworten.
PHP scheidet für mich als Lösung , da es nur einmalig ausgeführt werden kann, aus, des wegen habe ich das Script mit CSS in Javascript erweitert. aber es läuft irgend wie nicht richtig.

HTML: 
<!DOCTYPE HTML>
<html>
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <script type="text/javascript">
            function update_auswahl() {
                
                var kat_select = document.forms.folder.kat;
                var ukat_select = document.forms.folder.u_kat;

                ukat_select.options.length = 0;
                if (kat_select.options[kat_select.selectedIndex].value == "select") {
                    ukat_select.options[0] = new Option("...");
                } else if (kat_select.options[kat_select.selectedIndex].value == "windows") {
                    ukat_select.options[0] = new Option("2008 R2");
                    ukat_select.options[1] = new Option("2012 R2");
                } else if (kat_select.options[kat_select.selectedIndex].value == "linux") {
                    ukat_select.options[0] = new Option("RedHat 5.5");
                    ukat_select.options[1] = new Option("RedHat 6.1");
                } else if (kat_select.options[kat_select.selectedIndex].value == "unix") {
                    ukat_select.options[0] = new Option("AIX 6.x");
                    ukat_select.options[1] = new Option("AIX 7.x");
                } else if (kat_select.options[kat_select.selectedIndex].value == "esx") {
                    ukat_select.options[0] = new Option("...");
                } else if (kat_select.options[kat_select.selectedIndex].value == "appliance") {
                    ukat_select.options[0] = new Option("...");
                }
                
                if(kat_select == 'select' || kat_select == 'esx' || kat_select == 'appliance' ) {
                    document.getElementById('u_kat').style.display = 'none';
                } else {
                    document.getElementById('u_kat').style.display = 'block';
                }
            }
        </script>
    </head>
    <body onload="init()">

    <form name="folder" method="POST">
        <p class="form">
            <label class="gross" for="">Operating System</label>
            <select size="1" id="kat" name="kat" onchange="update_auswahl()">
                <option value="select" selected>select</option>
                <option value="windows">Windows</option>
                <option value="linux">Linux</option>
                <option value="unix">Unix</option>
                <option value="esx">VM Host</option>
                <option value="appliance">Appliance</option>
            </select>
        </p>
        <p class="form" id="u_kat" style="display:none; visibility:hidden;">
            <label class="gross" >OS-Specific</label>        
            <select size="1" name="u_kat">
                <option selected>...</option>
            </select>
        </p>
        <p class="form">
            <input type="submit" name="senden" value="senden">
        </p>
    </form>
    
<?php

    if(isset($_POST["senden"])) {
        echo $_POST["kat"].'</br>';
        echo $_POST["u_kat"];
    } 

?>
    </body>
</html>

Kurze Hilfestellung bitte
Gruß Jörg
 
Zuletzt bearbeitet:
wenn ich eine Seite aufrufe werden die PHP-Scripte Serverseitig ausgeführt(ein mal) wenn sich ein Delta beim client ergibt, ist das für PHP egal erst wenn ich die Seite neulade dann werden die Veränderungen sichtbar.
 
Ja korrekt aber dafür gibt es Ajax. Damit kann man Daten mit PHP austauschen ohne Reload der Seite.
 
visibility:hidden; muss gelöscht werden dann geht es einwandfrei so wie oben steht im letzten POST
 
SteelWheel schrieb:
wer nicht weiß, warum man beides nehmen soll: bitte fragen, statt zu lästern!
Zum Vergrößern anklicken....
Dann erklär' das doch mal. Warum sollte man noch visiblity: hidden setzen, wenn man schon display: none hat? Ich erkenne darin keinen Sinn... oder welcher Browser verhält sich unterschiedlich, je nachdem ob man visiblity gesetzt hat oder nicht?

Ich stimme dem letzten Satz der obersten Antwort von hide - CSS display:none and visibility:hidden - Stack Overflow ganz zu.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben