Dropdown Menü mit Bedingung

  • Ersteller Ersteller Unglücksrabe
  • Erstellt am Erstellt am
U

Unglücksrabe

Guest
Hi,

ich habe nochmal eine Frage.
Ich möchte ein Dropdown Menü erstellen (habe ich bereits) welches ich anklicke und dann soll sich ein weiteres Dropdown Menü mit Inhalten füllen.
Beispiel:

Ich wähle im Dropdown Menü von Pflanzenarten : "Baum" aus. Dann soll ein anderes Dropdown Menü erscheinen, welches nur Bäume anzeigt. Anschließend wieder einen Baum auswählen und es sollen zum Beispiel die Jahreszeit ausgegeben werden. Am Ende sollen alle Informationen die zu diesem Baum passen ausgegeben werden.

Bsp:

Baum, Busch, Blume - Baum
Birke, Buche, Eiche - Buche
Wintergewächs , Sommergewächs, Neutral - Neutral

Wenn ich Neutral angeklickt habe, soll er mir alle Informationen über diesen Baum heraussuchen und ausgeben.

Mein Dropdown Menü sieht im Moment so aus :

Spoiler:
<select>
<?php
$sql = "SELECT Benutzername FROM Benutzer ORDER BY Benutzername";
$result = mysql_query($sql) OR die(mysql_error());
while($row = mysql_fetch_assoc($result)) {
echo "<option>" . $row['Benutzername'] . "</option>";
}
?>
</select>


Hoffe ihr habt eine Idee, komme langsam nichtmehr voran.

Lieben Gruß
 
Du könntest zB bei der ersten Auswahl eine Variable setzen (und mit Get oder Post übergeben). Dann prüfst du ob die Variable gesetzt ist (bzw. ob etwas übergeben wurde) und zeigst entsprechend eine 2. Dropdown-Box an, und zwar nur mit Werten, die zur gesetzten Variable passen. Gleiches dann beim nächsten Dropdown.

Schwieriger, aber für den Benutzer besser, wäre wenn sich das Ganze mit Ajax aktualisierst. Du könntest dir zB eine 2. PHP-Seite erstellen, die dir immer nur eine Liste ausgibt (am besten gleich als JSON), je nach dem welchen Parameter du übergeben hast. Diese Liste holst du dir mit Ajax und damit kannst du das nächste DropDown anzeigen. Nachteil ist natürlich, dass das nur mit JavaScript funktioniert (und erst mal nur wenn alles auf der gleichen Domain liegt).
 
Ich würde das ganze mit (Jquery) Ajax und Json realisieren.

HTML:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
    
    $(function(){
        
        $('select:.sel').live('change', function(){
            var step = $(this).data('step');
            if(step <= 3){
                $(this).nextAll('.sel').remove();
                $.post('ajax/infos.php', {info:{step:step ,val:$(this).val()}}, function(data){
                    if(data.type == 'select'){
                        $('#selection').append('<select class="sel" data-step="'+(step+1)+'"></select>');
                        $.each(data.attr, function(i,d){
                            $('.sel::nth-child('+(step+1)+')').append('<option>'+d+'</option>');
                            console.log(d);
                        });
                    }else if(data.type == 'list'){
                        $('#selection').append('<p class="sel">'+data.attr+'</p>');
                    }
                
                }, 'json');
            }
        });
        
    });
    
</script>
<div id="selection">
    <select class="sel" data-step="1">
        <option value="">Bitte auswählen</option>
        <option value="baum">Baum</option>
        <option value="busch">Busch</option>
        <option value="blume">Blume</option>
    </select>
</div>


ajax/infos.php :

PHP:
<?
//$value = $_POST['info']['val'] //Ausgewähles Element;

switch ($_POST['info']['step']) {
    case 1:
        $return['attr'][] = 'Birke';
        $return['attr'][] = 'Buche';
        $return['attr'][] = 'Eiche';
        $return['type'] = 'select';
        break;
    case 2:
        $return['attr'][] = 'Wintergewächs';
        $return['attr'][] = 'Sommergewächs';
        $return['attr'][] = 'Neutral';
        $return['type'] = 'select';
        break;
    case 3:
        $return['attr'][] = 'Infos';
        $return['type'] = 'list';
        break;
    default:
        break;
}
echo json_encode($return);
?>
 
Zuletzt bearbeitet:

Online-Statistiken

Zurzeit aktive Mitglieder
0
Zurzeit aktive Gäste
34
Besucher gesamt
34

Beliebte Forum-Themen

Zurück
Oben Unten