Dropdown-Liste die neue Seite @ tutorials.de: Tutorials, Forum & Hilfe

thobikid · 14.11.03 19:38

Also ich habe schon einmal ne Frage um Dropdown-Liste erstellt. Jedoch da ich jetzt diese habe, tritt das nächste Problem auf. Ich habe nun 2 Listen, bei der das so ist, dass wenn man etwas in der 1. Liste auswählt sich in der 2. Liste was ändert. (Wers net so verstanden hat, soll sich mal das Script umformen)

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="JavaScript1.2" type="text/javascript">
auswahl_1 = new Array
(
"Wähle deine Klasse",
"DonnerKrieger",
"Krieger",
"Skalde",
"Berserker",
"Wilder",
"Runenmeister",
"Geisterbeschwörer",
"Knochentänzer",
"Schattenklinge",
"Jäger",
"Heiler",
"Schamane"
)
auswahl_2 = new Array
(
"Wähle deine Klasse",
"Fian",
"Champion",
"Schwertmeister",
"Waldläufer",
"Nachtschatten",
"Hüter",
"Barde",
"Druide",
"Eldritch",
"Mentalist",
"Beschwörer",
"Schnitter",
"Animist"
)
auswahl_3 = new Array
(
"Wähle deine Klasse",
"Waffenmeister",
"Söldner",
"Paladin",
"Arawnkrieger",
"Kundschafter",
"Minnesänger",
"Infiltrator",
"Theurg",
"Zauberer",
"Hexer",
"Kabbalist",
"Kleriker",
"Ordensbruder",
"Nekromant"
)
function tausche()
{
if(document.forms.eingabe.Reich.options[1].selected == true)
{
x = document.forms.eingabe.Klasse.length
if(document.forms.eingabe.Klasse.length !=  0)
        { 
        var Zaehler = 0;
            while(Zaehler != x)
            {
            document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length-1] = null;
            Zaehler++;  
            }
a = new Option(auswahl_1[0]);
b = new Option(auswahl_1[1]);
c = new Option(auswahl_1[2]);
d = new Option(auswahl_1[3]);
e = new Option(auswahl_1[4]);
f = new Option(auswahl_1[5]);
g = new Option(auswahl_1[6]);
h = new Option(auswahl_1[7]);
i = new Option(auswahl_1[8]);
j = new Option(auswahl_1[9]);
k = new Option(auswahl_1[10]);
l = new Option(auswahl_1[11]);
m = new Option(auswahl_1[12]);
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = a;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = b;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = c;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = d;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = e;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = f;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = g;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = h;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = i;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.lengh] = j;
document.formss.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = k;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = l;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = m;
return false;
}
}
if(document.forms.eingabe.Reich.options[2].selected == true)
{
x = document.forms.eingabe.Klasse.length
if(document.forms.eingabe.Klasse.length !=  0)
        { 
        var Zaehler = 0;
            while(Zaehler != x)
            {
            document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length-1] = null;
            Zaehler++;  
            }
aa = new Option(auswahl_2[0]);
ab = new Option(auswahl_2[1]);
ac = new Option(auswahl_2[2]);
ad = new Option(auswahl_2[3]);
ae = new Option(auswahl_2[4]);
af = new Option(auswahl_2[5]);
ag = new Option(auswahl_2[6]);
ah = new Option(auswahl_2[7]);
ai = new Option(auswahl_2[8]);
aj = new Option(auswahl_2[9]);
ak = new Option(auswahl_2[10]);
al = new Option(auswahl_2[11]);
am = new Option(auswahl_2[12]);
an = new Option(auswahl_2[13]);
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = aa;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ab;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ac;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ad;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ae;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = af;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ag;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ah;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ai;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = aj;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ak;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = al;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = am;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = an;
return false;
}
}
if(document.forms.eingabe.Reich.options[3].selected == true)
{
x = document.forms.eingabe.Klasse.length
if(document.forms.eingabe.Klasse.length !=  0)
        { 
        var Zaehler = 0;
            while(Zaehler != x)
            {
            document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length-1] = null;
            Zaehler++;  
            }
ba = new Option(auswahl_3[0]);
bb = new Option(auswahl_3[1]);
bc = new Option(auswahl_3[2]);
bd = new Option(auswahl_3[3]);
be = new Option(auswahl_3[4]);
bf = new Option(auswahl_3[5]);
bg = new Option(auswahl_3[6]);
bh = new Option(auswahl_3[7]);
bi = new Option(auswahl_3[8]);
bj = new Option(auswahl_3[9]);
bk = new Option(auswahl_3[10]);
bl = new Option(auswahl_3[11]);
bm = new Option(auswahl_3[12]);
bn = new Option(auswahl_3[13]);
bo = new Option(auswahl_3[14]);
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = ba;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bb;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bc;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bd;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = be;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bf;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bg;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bh;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bi;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bj;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bk;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bl;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bm;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bn;
document.forms.eingabe.Klasse.options[document.forms.eingabe.Klasse.length] = bo;
return false;
}
}
return false
}
 
</script>
</head>
<body>
<form name="eingabe">
<select name="Reich" size="1" onchange="tausche()">
<option value="Reich">Wähle dein Reich</option>
<option value="Midgard">Midgard</option>
<option value="Hibernia">Hibernia</option>
<option value="Albion">Albion</option>
</select>
 
<select name="Klasse" size="1">
<option selected value="Klasse">Wähle deine Klasse</option>
</select>
 
</form>
</body>
</html>

So nun zu der Hauptfrage:
Ich wollte nun, dass wenn man etwas in der 2. (veränderten-) Liste auswählt sich die darunterliegende Seite ändert.
Wie kann man das machen Oder ist das nicht möglich
Wers weiss, sollte bitte auch den Code hinschreiben, da ich noch (fast) keine Ahnung habe.

Sven Mintel · 15.11.03 01:30

Mmmh...ich weiss nicht so recht, was du meinst mit"darunterliegende Seite".
Du kannst z.B. die Seite komplett gegen eine neue austauschen...
wenn es das ist, was du meinst.... dazu musst du onchange das location-Attribut des Dokuments ändern....
(hab den Code mal etwas verändert, ansonsten landest du bei noch mehr "Reichen" und "Klassen" schnell im MegaByte-Bereich

)

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
<!--
auswahl=new Array();
auswahl['Midgard'] = new Array
(
"DonnerKrieger",
"Krieger",
"Skalde"
//usw....
);
auswahl['Hibernia'] = new Array
(
"Fian",
"Champion",
"Schwertmeister"
//usw....
);
auswahl['Albion'] = new Array
(
"Waffenmeister",
"Söldner",
"Paladin"
//usw....
);
function tausche(obj)
{
klassen=document.eingabe.Klasse;
if(obj[0].value=='false'){obj[0]=null;}
klassen.options.length=0;
for(i=-1;i<auswahl[obj[obj.selectedIndex].value].length;++i)
    {
    if(i<0){txt='Wähle deine Klasse';}
    else{txt=auswahl[obj[obj.selectedIndex].value][i];}
    nO=new Option(txt,'',false);
    klassen[klassen.length]=nO;
    }
}
function newDoc()
{
ff=document.eingabe;
ziel=eval(ff.Reich.selectedIndex+1)+'_'+ff.Klasse.selectedIndex+'.html';
document.location=ziel;
}
//-->
</script>
</head>
<body>
<form name="eingabe">
<select name="Reich" onchange="tausche(this.options);">
<option value="false">Wähle dein Reich</option>
<option value="Midgard">Midgard</option>
<option value="Hibernia">Hibernia</option>
<option value="Albion">Albion</option>
</select>
<select name="Klasse"onchange="newDoc();">
<option value="false">------------------------------</option>
</select>
</form>
</body>
</html>

Beim Ändern des zweiten <select>'s wird die aktuelle Seite gegen eine neue ausgetauscht.....
Das Schema dabei ist wie folgt:

Code :

1	[Reich]_[Klasse].html

....wobei für Reich und Klasse jeweils eine Ziffer steht....entsprechend der Reihenfolge in den Arrays/<selects>....
also bspw.
2_5.html=>Hiberna/Nachtschatten
1_2.html=>Midgard/Krieger
3_12.html=>Albion/Kleriker

....usw.

thobikid · 16.11.03 11:27

Danke genau das hab ich gesucht.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dropdown Liste

Dropdown Liste in Spring

Dropdown-Liste erweitern

PHP und DropDown Liste

DropDown-Liste aktualisieren

E-Mail:

Abonnieren Abbestellen