Servus miteinander,
ich habe folgendes Anliegen:
Ich habe 2 Drop-Down Felder auf meiner Seite. Nach der Auswahl funktioniert auch alles einwandfrei. Anschliessend arbeite ich nämlich mit Content Categories weiter, je nach Auswahl, sollte bei diesem Problem aber keine Bewandniss haben.
Mein Problem ist also nun folgendes. Abhängig davon, was ich im ersten Feld auswähle, soll im zweiten Feld nur noch passend zum ersten die gewünschten Optionen auswählbar sein.
Mein bisheriger Code:
<h2>Abhängige Felder</h2>
<p class="bodytext">Hier kommt noch Text rein</p>
<form id="finder" action="/index.php?id=100" method="post">
<div style="float:left; width:45%; margin:0 5px 0 0;">
<select name="b" id="b" style="width:100%; font-size:1.3em; border:1px solid #848b8e; padding:1px; ">
<option value="0" selected="selected" >Felder1</option>
<option value="1">Feld1</option>
<option value="2">Feld2</option>
<option value="3">Feld3</option>
</select>
</div>
<div style="float:left; width:45%; margin:0 5px 0 0;">
<select name="a" id="a" style="width:100%; font-size:1.3em; border:1px solid #848b8e; padding:1px;">
<option value="0" selected="selected">Felder2</option>
<option value="4">Feld1</option>
<option value="7">Feld2</option>
<option value="8">Feld3</option>
<option value="9">Feld4</option>
<option value="10">Feld5</option>
</select>
</div>
<div><input type="image" src="/fileadmin/images/sendbutton.png" alt="Absenden" style="float:left; height: 2.1em;" /></div>
<div style="clear:both;"></div>
</form>
Das heisst also, wenn ich Feld1 in Felder1 auswähle, dann sollen im zweiten Drop-Down Feld (Felder2) nur noch Feld3, Feld4 auswählbar sein bzw. wenn ich Feld2 in Felder1 auswähle nur noch Feld1 und Feld5, usw...
Wie kann ich also die Abhängigkeiten der Felder festlegen? Für eure Hilfe wäre ich euch sehr dankbar!
Gruß
timsn
Nimmst Du die Extension ke_search
Servus,
hab mir die Extension mal angeschaut,
gibts da keine andere Möglichkeit das umzusetzen, evtl. mit ein paar
Codezeilen, also direkt im HTML-Code?
Ich möchte ja nicht eine komplette Suche implementieren, sondern nur die
2 abhängigen Dropdown-Menüs. Je nachdem was ich hier auswähle, greift dann
die Extension cag_relatedcontent.
Bin ein bisschen am verzweifeln, ich hoffe ihr habt vielleicht noch ne Idee...
Gruß timsn
Hallo ist zwar nicht der wahre Jakob, aber besser als Nichts.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Selected mit 2 Feldern ohne Hidden</title>
<script>
var setOptions = function(f)
{
for (var i=0; i<f.elements['lesen_ja[]'].options.length; i++)
{
f.elements['lesen_ja[]'].options[i].selected = false;
}
for (var i=0; i<f.elements['lesen_ja[]'].options.length; i++)
{
if (f.elements['lesen_ja[]'].options[i].value == f.elements['schreiben_ja[]'].value)
{
f.elements['lesen_ja[]'].options[i].selected = true;
}
}
}
</script>
</head>
<body bgcolor="#ffffff">
<form id="form" method="post" action="ziel.php">
<h2>Abhängige Felder</h2>
<p class="bodytext">Hier kommt noch Text rein</p>
<form id="finder" action="/index.php?id=100" method="post" >
<div style="float:left; width:45%; margin:0 5px 0 0;">
<select name="schreiben_ja[]" id="b" style="width:100%; font-size:1.3em; border:1px solid #848b8e; padding:1px; " onclick="setOptions(this.form);">
<option value="0" selected="selected" >Felder1</option>
<option value="1">Feld1</option>
<option value="2">Feld2</option>
<option value="3">Feld3</option>
</select>
</div>
<div style="float:left; width:45%; margin:0 5px 0 0;">
<select name="lesen_ja[]" id="a" style="width:100%; font-size:1.3em; border:1px solid #848b8e; padding:1px;" size="2" multiple>
<option value="a" selected="selected">Felder2</option>
<option value="2">Feld1</option>
<option value="b">Feld2</option>
<option value="1">Feld3</option>
<option value="1">Feld4</option>
<option value="2">Feld5</option>
</select>
</div>
<br / >
<div><input type="image" src="/fileadmin/images/sendbutton.png" alt="Absenden" style="float:left; height: 2.1em;" /></div>
<br / >
<div><input type="reset" style="float:left; height: 2.1em;" /></div>
</form>
</body>
</html>