JavaScript / Tipps / Doppelte Menü-Auswahlliste[IE|M|O]

von: Werner Zenk

Dieses Auswahlliste-Menü ändert nach dem auswählen einer Option,
den Inhalt der zweiten Auswahlliste.

Demo:

 

Quelltext: „Doppelte Menü-Auswahlliste”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form name="doppelmenue" action="">

<select name="auswahlliste" size="1" onChange="redirect(this.options.selectedIndex)">
 <option>Home</option>
 <option>Suchmaschinen</option>
 <option>Sonstiges</option>
</select>

<select name="auswahlliste2" size="1">
 <option value="startseite.htm">Homepage</option>
 <option value="buch.htm">Gästebuch</option>
 <option value="forum.htm">Forum</option>
</select>

<input type="button" name="test" value="Los" onClick="auswaehlen()">
</form>

<script type="text/javascript">
// Doppelte Menü-Auswahlliste

var groups = document.doppelmenue.auswahlliste.options.length;
var auswahl = new Array(groups);
for (var zaehler = 0; zaehler < groups; zaehler++) {
 auswahl[zaehler] = new Array();
}

auswahl[0][0] = new Option("Homepage", "startseite.htm");
auswahl[0][1] = new Option("Gästebuch", "buch.htm");
auswahl[0][2] = new Option("Forum", "forum.htm");

auswahl[1][0] = new Option("Yahoo", "http://www.yahoo.de");
auswahl[1][1] = new Option("Google", "http://www.google.de");
auswahl[1][2] = new Option("Windows Live", "http://www.live.com");

auswahl[2][0] = new Option("T-Online", "http://www.t-online.de");
auswahl[2][1] = new Option("Arbeitsamt", "http://www.arbeitsamt.de");
auswahl[2][2] = new Option("Homepage-Total", "http://www.homepage-total.de");
auswahl[2][3] = new Option("Netzgemeinde", "http://www.netzgemein.de");

var temp = document.doppelmenue.auswahlliste2;

function redirect(x) {
 for (var zaehler = temp.options.length-1; zaehler > 0; zaehler--) {
  temp.options[zaehler] = null;
 }
 for (var zaehler = 0; zaehler < auswahl[x].length; zaehler++) {
  temp.options[zaehler] = new Option(auswahl[x][zaehler].text,auswahl[x][zaehler].value);
 }
 temp.options[0].selected = true;
}

function auswaehlen() {
 location.href = temp.options[temp.selectedIndex].value;
}
</script>


Tipp - Auswahllisten Generator -
Dieser Generator erstellt Auswahllisten mit einer fortlaufenden Zahl.
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Bianca:
Wie muss der Code angepasst werden, damit Links in einem neuen Fenster angezeigt werden?

Werner: 
function auswaehlen() {
 var url = temp.options[temp.selectedIndex].value;
 window.open(url, 'fenster', 'width=' + 500 + ',height=' + 300);
}


Bort:
wie sieht das ganze aus, wenn ich 4 Auswahllisten erstellen möchte?

Werner:
Das ganze sieht dann natürlich länger aus JavaScript sollte man allerdings können um das Script zu erweitern.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Anzahl der HTML-Tags - Anzahl der HTML-Tags einer Webseite ausgeben.  Mit Klick markieren - Mit einem Klick können sie den Text im Textfeld markieren.  Button mit Doppelklick  Eingabefeld automatisch ändern - Eingabefeld ändert bei 'onFocus' den Inhalt und die Textfarbe.  Trinitätsoperator  Mini-Keks (Cookie)  CSS-Angaben mit JavaScript auslesen und dynamisch ändern  Formular nur mit Großbuchstaben  Lesezeichen/Favoriten für I. Explorer und Firefox setzen  …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner