Probleme beim Erstellen mehrerer Dropdownmenüs

Fragen zu allen Themen rund ums Programmieren außerhalb von phpBB können hier gestellt werden - auch zu anderen Programmiersprachen oder Software wie Webservern und Editoren.
Antworten
Benutzeravatar
Lucas1510
Mitglied
Beiträge: 823
Registriert: 04.07.2003 13:59

Probleme beim Erstellen mehrerer Dropdownmenüs

Beitrag von Lucas1510 »

Hallo alle zusammen,

ich möchte auf einer Seite mehrere Dropdownmenüs benutzen.
Erstelle ich eine Seite mit nur einem Menü, klappt alles wunderbar, auch mit zweien geht's noch, aber wenn ich mehr einbaue, funktioniert die Navigation nicht mehr, entweder es passiert gar nichts oder es wird auf die falsche Seite weitergeleitet.

Nun bin ich nicht gerade der Javascript-König und das was ich mir zusammen gebastelt habe, wird einige bestimmt dazu bringen, sich die Haare zu raufen.

So sieht der Code aus:

Code: Alles auswählen

<script language="JavaScript">
<!-- Verstecken für ältere Browser --
function sprung(form){
var wert=form.zielform.selectedIndex
var inhalt=form.zielform.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}

function sprung(form){
var wert=form.zielform2.selectedIndex
var inhalt=form.zielform2.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform2.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}

function sprung(form){
var wert=form.zielform3.selectedIndex
var inhalt=form.zielform3.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform3.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}

function sprung(form){
var wert=form.zielform4.selectedIndex
var inhalt=form.zielform4.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform4.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}

function sprung(form){
var wert=form.zielform5.selectedIndex
var inhalt=form.zielform5.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform5.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}

function sprung(form){
var wert=form.zielform6.selectedIndex
var inhalt=form.zielform6.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform6.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}
// Ende Verstecken -->
</script>



<form NAME="formular"><p>
<select NAME="zielform" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 1</option>
<option value="seite1.htm?1">Seite 1</option>
<option value="seite2.htm?1">Seite 2</option>
<option value="seite3.htm?1">Seite 3</option>
<option VALUE="0"> </option></select>


<select NAME="zielform2" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 2</option>
<option value="seite4.htm?1">Seite 4</option>
<option value="seite5.htm?1">Seite 5</option>
<option value="seite6.htm?1">Seite 6</option>
<option VALUE="0"> </option></select>

<select NAME="zielform3" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 3</option>
<option value="seite7.htm?1">Seite 7</option>
<option value="seite8.htm?1">Seite 8</option>
<option value="seite9.htm?1">Seite 9</option>
<option VALUE="0"> </option></select>

<select NAME="zielform4" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 4</option>
<option value="seite10.htm?1">Seite 10</option>
<option value="seite11.htm?1">Seite 11</option>
<option value="seite12.htm?1">Seite 12</option>
<option VALUE="0"> </option></select>

<select NAME="zielform5" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 5</option>
<option value="seite13.htm?1">Seite 13</option>
<option value="seite14.htm?1">Seite 14</option>
<option value="seite15.htm?1">Seite 15</option>
<option VALUE="0"> </option></select>

<select NAME="zielform6" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 6</option>
<option value="seite16.htm?1">Seite 16</option>
<option value="seite17.htm?1">Seite 17</option>
<option value="seite18.htm?1">Seite 18</option>
<option VALUE="0"> </option></select>

</p></form>
Wer kann mir eine Möglichkeit nennen (und tut es auch :wink: ), wie ich das Menü zum Laufen bekomme?

Der Original-Quelltext, aus dem ich mir das zusammen gebaut habe, sieht so aus:

Code: Alles auswählen

<script language="JavaScript">
<!-- Verstecken für ältere Browser --
function sprung(form){
var wert=form.zielform.selectedIndex
var inhalt=form.zielform.options[wert].value;
var posanhang=inhalt.lastIndexOf("?");
var anhang=new String(inhalt.substring(posanhang+1,posanhang+2));
var ziel=inhalt.slice(0,posanhang);
if (form.zielform.options[wert].value != "0"){
if(anhang==1){location=ziel;}
if(anhang==2){window.open(ziel,"Fenster");}
if(anhang==3){parent.Framename.location.href=ziel;}
}}// Ende Verstecken -->
</script> 

<form NAME="formular"><p>
<select NAME="zielform" onChange="sprung(this.form)" SIZE="1">
<option SELECTED VALUE="0">Menü 1</option>
<option value="seite1.htm?1">Seite 1</option>
<option value="seite2.htm?1">Seite 2</option>
<option value="seite3.htm?1">Seite 3</option>
<option VALUE="0"> </option>
</select></p></form>
Ich habe den Code einfach mehrmals kopiert und bei jedem Einfügen zielform im Javascript und im HTML-Code mit einer Zahl versehen.

Vielen Dank für Eure Hilfe,

Gruß,

Lucas
"Nein, Schatz, Du bist nicht dumm. Du bist sogar sehr hübsch!"
Nach oben
Benutzeravatar
Pyramide
Ehrenadmin
Beiträge: 12734
Registriert: 19.04.2001 02:00
Wohnort: Meschede

Beitrag von Pyramide »

Wenn du nur die aktuelle Seite ändern willst, kannst dir den ganzen Blödsinn einfach sparen und folgenden Code entsprechend oft kopieren:

Code: Alles auswählen

<select onChange="if(this.value != 0) {location.href=this.value;}" size="1">
<option selected value="0">Menü 1</option>
<option value="seite1.htm">Seite 1</option>
<option value="seite2.htm">Seite 2</option>
<option value="seite3.htm">Seite 3</option>
</select>
Du solltest aber bedenken, dass solche Menüs aus Usabilitygründen nicht zu empfehlen sind (Benutzer sind es nicht gewöhnt, dass beim Ändern eines Formularelementes eine Aktion ausgeführt wird). Dazu kommt, dass ein solches Menü bei deaktiviertem Javascript überhaupt nicht funktioniert.
KB:knigge
Nach oben
Antworten

Zurück zu „Coding & Technik“