[Javascript] Menü mit 2 verbundenen Dropdown-Menüs+kleines Problem

BartTheDevil89 · 13 März 2008

Hallo,

also mit meinen minderen Javascript-Kenntnissen, habe ich mir jetzt folgendes Menü gebaut:

https://test.zocko.de/test.php

Problem ist jetzt, dass ich, nachdem ich das Formular abgesendet habe, das Menü mit den beiden Daten aufgeklappt und jeweils beides ausgewählt haben möchte. Nur leider bekomm ich es einfach nicht hin...Hier ist der Code:

PHP:

<html>
<?
$kat = $_POST['kategorie'];
$unterkat = $_POST['unterkategorie'];
echo "Habe $kat Kategorie und $unterkat Unterkat<br><br>";
?><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Online-HTML-Editor.de - Der kostenlose online WYSIWYG Editor!</title>
<script language="Javascript">
<!-- Start
function update_auswahl() {
	var kategorieAuswahl = document.forms.verzeichni.kategorie;
	var unterkategorieAuswahl = document.forms.verzeichni.unterkategorie;
	
	unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren

	if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "1"){
		unterkategorieAuswahl.options[0] = new Option("Audi", 3);
		unterkategorieAuswahl.options[1] = new Option("VW", 4);
		
		
	} else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "2"){
		unterkategorieAuswahl.options[0] = new Option("MAN", 5);
		unterkategorieAuswahl.options[1] = new Option("Brummi", 6);
	}
}
// Ende -->
</script>
</head>
<body>
<form name="verzeichni" action="test.php" method="post">
	<select size="1" name="kategorie" onchange="update_auswahl()">	
	    <option value="-1" selected>Bitte wählen sie den Bereich aus</option>
		<option value="1">PKW</option>
		<option value="2">LKW</option> 
	</select>
	<select size="1" name="unterkategorie">
		<option selected>Bitte wählen sie zuerst den Bereich aus...</option>
	</select>
	 <input class="input" type="submit" name="submit" accesskey="S" value="Zeigen">
</form>
</body>
</html>

Habt ihr ne Idee? Denn wie ich die erste Auswahl auf mein richtiges bring weiß ich ja...über php einfach das selected an die passende Stelle setzen. Aber wie schaffe ich es, dass in der zweiten Auswahl dann die richtigen Werte angezeigt werden und dort auch das selected an die richtige Stelle kommt?

Astrodan · 16 März 2008

gib den option-tags ids (irgendwas eindeutiges, entweder durchnumeriert wie deine values oder mit dem Namen BMW etc.. iDs sind zu bevorzugen, da du die sowieso übermittelst.
Und dann kannster per getElementById() auf das entsprechende option-Element zugreifen, und es über die Node()-Funktionen aus Javascript (vgl. selfhtml) den entsprechenden Tag um das Attribut selected="selected" erweitern, welches die Option direkt selektiert.

Hab keine Zeit dir das zu tippseln, und vor allem nicht ausreichende Auswendig-Kenntnisse. Aber es sollte funktionieren.

Moloc · 16 März 2008

Es gibt, wie du schon sagst, zwei möglichkeiten. Entweder du regelst das mit php (Erstellung beider select-boxen. Dazu benötigst du jedoch die Daten der select-boxen in php.)

Die zweite Möglichkeit: Mach das einfach mit JavaScript (wenn der rest eh schon mit JavaScript gemacht wurde).

Hier ein funktionierendes JavaScript Beispiel:

HTML:

<?php
$kat = (isset($_POST['kategorie']) ? (int)$_POST['kategorie'] : -1); 
$unterkat = (isset($_POST['unterkategorie']) ? (int)$_POST['unterkategorie'] : -1); 
?>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Online-HTML-Editor.de - Der kostenlose online WYSIWYG Editor!</title> 
<script language="Javascript"> 
<!-- Start 
function update_auswahl() { 
    var kategorieAuswahl = document.forms.verzeichni.kategorie; 
    var unterkategorieAuswahl = document.forms.verzeichni.unterkategorie; 
     
    unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren 

    if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "1"){ 
        unterkategorieAuswahl.options[0] = new Option("Audi", 3); 
        unterkategorieAuswahl.options[1] = new Option("VW", 4); 
         
         
    } else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "2"){ 
        unterkategorieAuswahl.options[0] = new Option("MAN", 5); 
        unterkategorieAuswahl.options[1] = new Option("Brummi", 6); 
    } 
}

function initialize() {
    var kategorieAuswahl = document.forms.verzeichni.kategorie; 
    var unterkategorieAuswahl = document.forms.verzeichni.unterkategorie; 
    
	kategorieAuswahl.selectedIndex = getOptionIndex(kategorieAuswahl, <?php echo $kat; ?>);
	update_auswahl();
    unterkategorieAuswahl.selectedIndex = getOptionIndex(unterkategorieAuswahl, <?php echo $unterkat; ?>);
}

function getOptionIndex(elem, value) {
	var i = 0;
	var retIndex = -1;
	while( i < elem.length && retIndex == -1 ) {
		if( elem.options[i].value == value ) {
			retIndex = i;
		}
		i++;
	}
	return retIndex;
}
// Ende --> 
</script> 
</head> 
<body onload="initialize();">
<?php echo "Habe $kat Kategorie und $unterkat Unterkat<br><br>"; ?>
<form name="verzeichni" action="testit.php" method="post"> 
    <select size="1" name="kategorie" onchange="update_auswahl()">     
        <option value="-1" selected>Bitte wählen sie den Bereich aus</option> 
        <option value="1">PKW</option> 
        <option value="2">LKW</option>  
    </select> 
    <select size="1" name="unterkategorie"> 
        <option selected>Bitte wählen sie zuerst den Bereich aus...</option> 
    </select> 
     <input class="input" type="submit" name="submit" accesskey="S" value="Zeigen"> 
</form> 
</body> 
</html>

(hier wurde ein onload-event hinzugefügt + die funktionen initialize und getOptionIndex)

BartTheDevil89 · 16 März 2008

Moloc schrieb:

Es gibt, wie du schon sagst, zwei möglichkeiten. Entweder du regelst das mit php (Erstellung beider select-boxen. Dazu benötigst du jedoch die Daten der select-boxen in php.)

Die zweite Möglichkeit: Mach das einfach mit JavaScript (wenn der rest eh schon mit JavaScript gemacht wurde).

Hier ein funktionierendes JavaScript Beispiel:

HTML:

<?php
$kat = (isset($_POST['kategorie']) ? (int)$_POST['kategorie'] : -1); 
$unterkat = (isset($_POST['unterkategorie']) ? (int)$_POST['unterkategorie'] : -1); 
?>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Online-HTML-Editor.de - Der kostenlose online WYSIWYG Editor!</title> 
<script language="Javascript"> 
<!-- Start 
function update_auswahl() { 
    var kategorieAuswahl = document.forms.verzeichni.kategorie; 
    var unterkategorieAuswahl = document.forms.verzeichni.unterkategorie; 
     
    unterkategorieAuswahl.options.length = 0; // DropDown Menü entleeren 

    if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "1"){ 
        unterkategorieAuswahl.options[0] = new Option("Audi", 3); 
        unterkategorieAuswahl.options[1] = new Option("VW", 4); 
         
         
    } else if (kategorieAuswahl.options[kategorieAuswahl.selectedIndex].value == "2"){ 
        unterkategorieAuswahl.options[0] = new Option("MAN", 5); 
        unterkategorieAuswahl.options[1] = new Option("Brummi", 6); 
    } 
}

function initialize() {
    var kategorieAuswahl = document.forms.verzeichni.kategorie; 
    var unterkategorieAuswahl = document.forms.verzeichni.unterkategorie; 
    
	kategorieAuswahl.selectedIndex = getOptionIndex(kategorieAuswahl, <?php echo $kat; ?>);
	update_auswahl();
    unterkategorieAuswahl.selectedIndex = getOptionIndex(unterkategorieAuswahl, <?php echo $unterkat; ?>);
}

function getOptionIndex(elem, value) {
	var i = 0;
	var retIndex = -1;
	while( i < elem.length && retIndex == -1 ) {
		if( elem.options[i].value == value ) {
			retIndex = i;
		}
		i++;
	}
	return retIndex;
}
// Ende --> 
</script> 
</head> 
<body onload="initialize();">
<?php echo "Habe $kat Kategorie und $unterkat Unterkat<br><br>"; ?>
<form name="verzeichni" action="testit.php" method="post"> 
    <select size="1" name="kategorie" onchange="update_auswahl()">     
        <option value="-1" selected>Bitte wählen sie den Bereich aus</option> 
        <option value="1">PKW</option> 
        <option value="2">LKW</option>  
    </select> 
    <select size="1" name="unterkategorie"> 
        <option selected>Bitte wählen sie zuerst den Bereich aus...</option> 
    </select> 
     <input class="input" type="submit" name="submit" accesskey="S" value="Zeigen"> 
</form> 
</body> 
</html>

(hier wurde ein onload-event hinzugefügt + die funktionen initialize und getOptionIndex)

Ha, super...damit läuft es und hab es auch schon super in das spätere Zielsystem einbauen können.

Dankeschön

[Javascript] Menü mit 2 verbundenen Dropdown-Menüs+kleines Problem

BartTheDevil89

Devilution Media

Astrodan

Gamma Cephei

Moloc

Well-known member

BartTheDevil89

Devilution Media

Ähnliche Themen