Hallo zusammen,
ich versuche gerade eine voneinander abhängige Auswahlliste zu erstellen.
In der ersten Liste soll man eine Oberkategorie auswählen können.
In der zweiten Liste soll man eine Unterkategorie von der ausgewählten Oberkategorie auswählen können.
Vergleichbar ist es mit www.tinte24.de, jedoch geht es dort um Hersteller bzw. Drucker, was aber vom Code her ja keinen großen Unterschied machen sollte.
Hat jemand da eine Idee oder vllt. sogar einen Code?
MfG
Den Anfang konnte ich nun schoneinmal machen.
So schaffe ich es aber leider nur eine Auswahlliste zu machen.
<script language="javascript" type="text/javascript">
function Go(x)
{
if(x == "nichts")
{
document.forms[0].reset();
document.forms[0].elements[0].blur();
return;
}
else
{
top.location.href = x;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
}
</script>
<form>
<select size=1 name="Auswahl" onChange="Go(this.form.Auswahl.options[this.form.Auswahl.options.selectedIndex].value)" class="auswahlliste1">
<option value="nichts">Bitte Hersteller wählen</option>
<option value="nichts">-----------------------</option>
[{assign var="categories" value=$oxcmp_categories}]
[{foreach from=$categories item=_cat}]
<option value="[{$_cat->getLink()}]">[{ $_cat->oxcategories__oxtitle->value }]</option>
[{/foreach}]
</select>
</form>
Hat jemand Ansätze für 2 voneinanderabhängige Listen?
MfG
Hey,
die Hauptkategorien hast du ja schon gefüllt, und die jeweiligen Unterkategorien sollten dir wie folgt ausgegeben werden:
// Hauptkategorien
[{foreach from=$oxcmp_categories item=ocats}]
// Subkategorien
[{foreach from=$ocats->getSubCats() item=Subcat}]
[{/foreach}]
[{/foreach}]
Danke schonmal.
Jedoch komm ich damit auch nicht an eine verkettete Liste ran:
Ich habe mal einen Code dafür gefunden. Das Problem ist, dass ich es nicht schaffe, die Auswahlliste zu automatisieren:
[{assign var="categories" value=$oxcmp_categories}]
[{foreach from=$categories item=_cat}]
<script language="JavaScript" type="text/javascript">
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
</script>
[{/foreach}]
[{foreach from=$categories item=_cat}]
<script language="JavaScript" type="text/javascript">
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_1_3 = new Option("13", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
</script>
[{/foreach}]
<script language="JavaScript" type="text/javascript">
displaywhenempty="Bitte Drucker wählen"
valuewhenempty=-1
displaywhennotempty="Bitte Drucker wählen"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
</script>
<form>
<Form name="austattungen">
<select name="combo0" id="combo_0" onChange="change(this);" class="auswahlliste1">
<option value="value1">Bitte Hersteller wählen</option>
[{foreach from=$categories item=_cat}]
<option value="value2">[{ $_cat->oxcategories__oxtitle->value }]</option>
[{/foreach}]
</select>
</br>
<select name="combo1" id="combo_1" onchange="change(this)" class="auswahlliste1">
<option value="value1">Bitte Drucker wählen</option>
</select>
</form>
Also die erste Liste, zeigt schon alle Oberkategorien an.
Doch die 2. verknüpfte nimmt nur die Daten aus dem Quelltext:
[{assign var="categories" value=$oxcmp_categories}]
[{foreach from=$categories item=_cat}]
<script language="JavaScript" type="text/javascript">
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
</script>
[{/foreach}]
[{foreach from=$categories item=_cat}]
<script language="JavaScript" type="text/javascript">
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_1_3 = new Option("13", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
</script>
[{/foreach}]
Jemand ne Idee, wie ich die Subcat da reinbekomme?
Das Problem ist ja, dass die Anzahl der Subcats nicht festegelegt ist.
Das sollte als Ansatz dienen.
Ich verstehe deinen ganzen JavaScript Code nicht, wenn ich ehrlich bin.
Warum so kompliziert?
Ich würde es wie folgt machen.
Du füllst das erste Dropdown mit folgenden Code, was du ja bereits weisst:
[{foreach from=$oxcmp_categories item=ocats}]
// Ich bin eine Hauptkategorie
[{/foreach}]
Wenn der User das Dropdown gewählt hat, legst du die oxparentid, bzw. oxrootid als POST oder GET Variable ab und die Seite wird neu geladen. Nun prüfst du ob diese Variable existiert und füllst dann das zweite Dropdown mit den jeweiligen Unterkategorien via ->getSubCats().
Oder habe ich hier etwas gänzlich missverstanden?
EDIT:
Ich habe jetzt mal einiges versucht aber komme nicht weiter. Nutze zurzeit folgenden Code:
<script language="javascript" type="text/javascript">
function Go(x)
{
top.location.href = x;
document.forms[0].reset();
document.forms[0].elements[0].blur();
}
</script>
<form>
<select size=1 name="Auswahl1" onChange="[B]???[/B]" class="auswahlliste1">
<option value="nichts" selected>Bitte Hersteller wählen</option>
<option value="---">-----------------------</option>
[{assign var="categories" value=$oxcmp_categories}]
[{foreach from=$oxcmp_categories item=ocat key=catkey name=root}]
<option value="[{$ocat->oxcategories__oxtitle->value}]">[{$ocat->oxcategories__oxtitle->value}]</option>
[{/foreach}]
</select>
</br>
<select size=1 name="Auswahl2" onChange="Go(this.form.Auswahl2.options[this.form.Auswahl2.options.selectedIndex].value)" class="auswahlliste1">
<option value="nichts" selected>Bitte Drucker wählen</option>
<option value="---">-----------------------</option>
[{foreach from=$ocat->getSubCats() item=osubcat key=subcatkey name=SubCat}]
<option value="[B]???[/B]">[{$osubcat->oxcategories__oxtitle->value}]</option>
[{/foreach}]
</select>
</form>
Die Funktion Go lässt einen nach der zweiten Auswahl nur auf die ausgewählte Seite kommen.
Ich habe jedoch noch keine Verbindung zwischen den Listen.
Wäre nett wenn du, novalgin, den Code tewas anpassen könntest.
genau so, wie die Hauptkategorie auch.
[{foreach from=$meineHauptCat->getSubCats() item=Subcat}]
[{ $Subcat->oxcategories__oxtitle->value }]
[{/foreach}]
Ein kleines ausbaufähiges und schnelles Beispiel. Voraussetzung ist, dass du die oxidid via POST Variable in der Session speicherst, sobald das Dropdown verändert wird.
// Äussere Schleife der Hauptkategorien
[{foreach from=$oxcmp_categories item=ocats}]
[{if $ocats->oxcategories__oxid->value eq $smarty.session.cat }]
// Innere Schleife Subkategorien
[{foreach from=$ocats->getSubCats() item=Subcat}]
[{ $Subcat->oxcategories__oxtitle->value }]
[{/foreach}]
[{/if}]
[{/foreach}]
Natürlich musst du noch ein paar Abfragen machen, wie z.B. ob die Variable exisitiert und ob die Kategorie auch sichtbar ist und nicht auf inaktiv gesetzt ist.
Das ist alles aus dem Gedächtnis und ohne Gewähr, aber zum besseren Verständnis sollte es reichen:-)
Zum testen kannst du mal folgenden Codezeile von oben ändern:
[{if $ocats->oxcategories__oxid->value eq $smarty.session.cat }]
in
[{if $ocats->oxcategories__oxid->value eq 'OXID ID EINER HAUPTKAT' }]
Vermutlich brauchst du die äussere Schleife gar nicht, und kannst anhand der OXIDID der Hauptkategorie gleich alle Subcats ausgeben, aber da müsste ich erst selbst nachschauen, denn so fit bin ich nicht:-) Das soll alles nur als Ansatz dienen.
BTW: nach meinem Vorschlag müsste folgendes eingetragen werden:
onChange="this.form.submit()"
Versuch das mal, das ist aber echt auf die schnelle und aus dem Gedächtnis. Du kannst auch per OXID Logik die Sachen in die Session schreiben, aber versuch erstmal, ob das so funktioniert. Ansonsten ist der Code stark verbesserungswürdig, aber ist ja nur ein Test:-))
[{php}]
if (isset($_POST['show']))
{
$_SESSION['scountry']=$_POST['show'];
}
if (isset($_POST['catsi']))
{
$_SESSION['scat']=$_POST['catsi'];
}
[{/php}]
<form name="ShowCountry" method="post">
<select name="show" size="1" id="liste" onChange="this.form.submit()">
<option selected="selected" value="selcountry">- - - auswählen - - -</option>
[{foreach from=$oxcmp_categories item=ocats}]
[{ if $ocats->oxcategories__oxid->value ==$smarty.session.scountry }]
<option selected="selected" value="[{$ocats->oxcategories__oxid->value}]">[{$ocats->oxcategories__oxtitle->value}]</option>
[{ else }]
<option value="[{$ocats->oxcategories__oxid->value}]">[{$ocats->oxcategories__oxtitle->value}]</option>
[{ /if }]
[{/foreach }]
</select>
</form>
<form name="cats" method="post">
<select name="catsi" size="1" id="ocatsi" onChange="this.form.submit()">
<option selected="selected" value="selcountry">- - - auswählen - - -</option>
[{foreach from=$oxcmp_categories item=ocats}]
[{ if $ocats->oxcategories__oxid->value ==$smarty.session.scountry }]
[{foreach from=$ocats->getSubCats() item=ocat}]
[{ if $ocat->oxcategories__oxid->value ==$smarty.session.scat }]
<option selected="selected" value="[{$ocat->oxcategories__oxid->value}]">[{$ocat->oxcategories__oxtitle->value}]</option>
[{ else }]
<option value="[{$ocat->oxcategories__oxid->value}]">[{$ocat->oxcategories__oxtitle->value}]</option>
[{ /if }]
[{/foreach }]
[{ /if }]
[{/foreach }]
</select>
</form>