• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Anfängerfrage zu Auswahlliste mit Linkverweisen

H

Haifisch

New member
Hallo + Tach,

bin neu hier und freue mich als JavaScript-Anfänger, dass es dieses Forum gibt:)

Halb geklaut und halb selbstgebastelt habe ich folgendes kleines JavaScript für eine HTML-Auswahlliste mit Verweiszielen (der Seitenbesucher soll aus der Auswahlliste ein Dokument anklicken können, welches sich dann im PDF-AddOn oder im externen Reader öffnet):

HTML: 
<!doctype html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Auswahlliste mit JavaScript</title>

<!--JavaScript noch auslagern in eigene Datei -->
<script>
function auswahl (form)  {
   var ausgewaehltereintrag=form.elements[0].selectedIndex
      if (form.elements[0].options[ausgewaehltereintrag].value != "0")  {
      window.open(form.elements[0].options[ausgewaehltereintrag].value,'_self');
      }
 }
</script>

</head>
<body>
   <p>
      <form action="">
         <select name="dokumentenliste" size="1" onChange="auswahl(this.form)">
            <option selected value="0">Bitte Auswahl treffen:</option>
            <option value="0"> </option>
            <option value="../dokumente/dokument1.pdf">Dokument 1</option>
            <option value="../dokumente/dokument2.pdf">Dokument 2</option>
            <option value="../dokumente/dokument3.pdf">Dokument 3</option>
         </select>
      </form>
   </p>
</body>
</html>

Das funktioniert auch, nur bin ich mir bei JavaScript immer noch sehr unsicher was die Notation angeht. Ist alles richtig aus Eurer Sicht?

Insbesondere die Zeile

Code: 
window.open(form.elements[0].options[ausgewaehltereintrag].value,'_self');
hat mir Probleme bereitet.

Alles richtig gemacht oder noch Fehler drin?

Danke + Grüße

Haifisch
 
Das JS ist schon richtig, aber nicht besonders schön und elegant.

Code: 
<!DOCTYPE html>
<html>
<head>
   <title>Auswahlliste mit JavaScript</title>

<script>
function auswahl(select){
	var value = select.value;
	if (value){
		location.href = value;
	}
 }
</script>

</head>
<body>
	<select name="dokumentenliste" size="1" onchange="auswahl(this)">
		<option selected value="">Bitte Auswahl treffen:</option>
		<option value="../dokumente/dokument1.pdf">Dokument 1</option>
		<option value="../dokumente/dokument2.pdf">Dokument 2</option>
		<option value="../dokumente/dokument3.pdf">Dokument 3</option>
	</select>
</body>
</html>

Schau' dir einfach mal alles an, was ich verändert hab'.
 
Vielen herzlichen Dank! So schön komprimiert hätte ich das (noch) nicht hinbekommen!

Noch zwei Fragen:

(1) Zum Weglassen von <form>:

Bist Du sicher, dass man das einfach weglassen kann? Eine Auswahlliste mit <select> ist in HTML ja ein Formular, was andere HTML-Dokumentationen bestätigen. Ich habe gerade mal in der aktuellen W3C-Spezifikation (www.w3.org/TR/html5) nachgeguckt, da steht im Kapitel 4.10 zu den Formularen: “The form attribute is used to explicitly associate the select element with its form owner” (www.w3.org/TR/html5/forms.html#the-select-element), was ja soviel heißen müsste wie „Das form-Attribut wird für die explizite Zuordnung von select zu seinem übergeordneten Formular verwendet“. Andererseits: wenn man dort zu den Code-Beispielen runterscrollt, sieht man, dass die das form-Attribut selbst weglassen! Das ist ja verwirrend:-(

(2) Zum Thema „JS für Anfänger“:

Kannst Du (oder jemand anders) eine aktuelle Einführung in JS empfehlen? (Online oder gedruckt, das ist beides ok für mich.)

Grüße

Haifisch
 
Haifisch schrieb:
Vielen herzlichen Dank!
Zum Vergrößern anklicken....
Bitte gern geschehen.
Haifisch schrieb:
So schön komprimiert hätte ich das (noch) nicht hinbekommen!
Zum Vergrößern anklicken....
Es ist noch kein Meister vom Himmel gefallen. Das kommt alles mit der Zeit.

Haifisch schrieb:
(2) Zum Thema „JS für Anfänger“:
Zum Vergrößern anklicken....
Ich hab' die JS/HTML-Grundlagen mit selfHTML gelernt, aber da das schon etwas her ist, ist das wahrscheinlich nicht mehr die beste Wahl (teilweise etwas veraltet und teilweise auch nicht wirklich guter Stil).
Jetzt schau' ich das meiste bei https://developer.mozilla.org/ oder direkt in den Spezifikationen nach.
 
Noch ein Wort zu window.open: meistens wird dies vom PopUp-Blocker des Browser geblockt. Es gibt da anscheinend Ausnahmeregeln, wenn die Funktion durch einen Klick des Users aufgerufen wird; aber darauf täte ich mich nicht verlassen...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben