JS Document openen via keuzelijst

Handleiding HTML Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin


Keuzelijsten worden in combinatie met JavaScript veel gebruikt als alternatief voor een lange opsomming van hyperlinks. Daarbij wordt aan het SELECT element de onchange event handler toegevoegd (zie het onderdeel Scripts). Als de bezoeker een mogelijkheid uit de keuzelijst kiest, treedt de change gebeurtenis op en wordt het bijbehorende script uitgevoerd.

De volgende voorbeelden worden gegeven:


Document vervangen via keuzelijst

Bekijk een voorbeeld in een nieuw venster.

In de body van het document staat het volgende formulier:

<FORM ACTION="geen_actie" NAME="snelmenu">
<SELECT NAME="documentkeuze" onchange="openURI()">
<OPTION VALUE="geen-url" SELECTED>Kies document</OPTION>
<OPTION VALUE="keuze1.html">Document 1</OPTION>
<OPTION VALUE="keuze2.html">Document 2</OPTION>
<OPTION VALUE="keuze3.html">Document 3</OPTION>
</SELECT>
</FORM>

Als waarde van het VALUE attribuut van het OPTION element is de URI van het te openen document opgenomen. In het voorbeeld is dat een bestand in dezelfde directory als het document, waarin de keuzelijst staat. Het kan echter ook een complete URI zijn:

<OPTION VALUE="https://www.handleidinghtml.nl/algemeen/trefwoorden.html">Trefwoordenregister</OPTION>

In de head van het document in het nieuwe venster is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function openURI() {
var control = document.snelmenu.documentkeuze;
if (control.options[control.selectedIndex].value != 'geen-url') {
location.href = control.options[control.selectedIndex].value;
}
}

//-->
</SCRIPT>

Om lange statements te voorkomen is in de functie "openURI" eerst de variabele "control" gedefinieerd, waarin is vastgelegd op welk formulier en welk control (formulieronderdeel) de functie betrekking heeft. Hierbij verwijst "snelmenu" naar het juiste formulier in het document en "documentkeuze" verwijst naar de juiste keuzelijst. Vervolgens wordt gecontroleerd of een geldige waarde voor het VALUE attribuut van het OPTION element is geselecteerd. Als dat zo is, wordt de geselecteerde URI gebruikt om het goede document te openen.

Omdat de keuzelijst alleen werkt in browsers die JavaScript ondersteunen, is het verstandig ook het formulier op te bouwen met behulp van JavaScript:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

var d = document;
d.write('<FORM ACTION="geen_actie" NAME="snelmenu">');
d.write('<SELECT NAME="documentkeuze" onchange="openURI()">');
d.write('<OPTION VALUE="geen-url" SELECTED>Kies document<\/OPTION>');
d.write('<OPTION VALUE="keuze1.html">Document 1<\/OPTION>');
d.write('<OPTION VALUE="keuze2.html">Document 2<\/OPTION>');
d.write('<OPTION VALUE="keuze3.html">Document 3<\/OPTION>');
d.write('<\/SELECT>');
d.write('<\/FORM>');

//-->
</SCRIPT>

Voor een toelichting op het gebruik van de backslash in de beëindiging van de verschillende elementen zie het onderdeel Scripts.

Omdat niet elke browser JavaScript kan of mag ondersteunen is het goed om ook een alternatief voor de keuzelijst op te nemen. Dat kan met behulp van het NOSCRIPT element en wordt toegelicht in het onderdeel Hyperlinks.


Document openen in frame

Wanneer je werkt met frames, dan kun je de keuzelijst opnemen in een navigatieframe. Bekijk een voorbeeld daarvan in een nieuw venster.

Uitgangspunt is een frameset met twee frames, welke de namen boven en onder hebben:

<FRAMESET ROWS="*,*">
<FRAME SRC="keuze1.html" NAME="boven">
<FRAME SRC="keuze2.html" NAME="onder">
</FRAMESET>

In de head van het document in het bovenste frame is het volgende script opgenomen:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function openURI() {
var control = document.snelmenu.documentkeuze;
if (control.options[control.selectedIndex].value != 'geen-url') {
parent.onder.location.href = control.options[control.selectedIndex].value;
}
}

//-->
</SCRIPT>

In de body van het document staat een formulier met dezelfde opbouw als in het eerste voorbeeld.


Document openen in nieuw venster

Het geselecteerde document kun je ook in een nieuw venster laten openen:

In de head van dit document staat het volgende script.

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function openURI() {
var control = document.snelmenu.documentkeuze;
if (control.options[control.selectedIndex].value != 'geen-url') {
URI = control.options[control.selectedIndex].value;
window.open(URI, "nieuw", "width=300,height=200");
}
}

//-->
</SCRIPT>

Het formulier in de body van dit document heeft weer dezelfde opbouw als in het eerste voorbeeld.

Het script werkt goed in de meeste browsers, met uitzondering echter van Netscape Navigator 2. Om de uitvoering van het script door deze browser te voorkomen, kun je daarom het beste eerst testen om welke browser het gaat. Die test kun je doen op basis van het algemene script voor de browsertest, dat is beschreven in het onderdeel Javascript en Informatie over de browser. Dat script moet je dus als eerste in de head van het document plaatsen. Het script voor het openen van een document in een nieuw venster krijgt nu de volgende opbouw:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

function openURI() {
if (!NN2) {
var control = document.snelmenu.documentkeuze;
if (control.options[control.selectedIndex].value != 'geen-url') {
URL = control.options[control.selectedIndex].value;
window.open(URL, "nieuw", "width=300,height=200");
}
}
}

//-->
</SCRIPT>

Ook het opbouwen van het formulier met de keuzelijst kun je voorkomen in Netscape Navigator 2:

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--

if (!NN2) {
document.write('<FORM>');
...
document.write('<\/FORM>');
}

//-->
</SCRIPT>


Inhoud onderdeel | Overzicht JavaScript voorbeelden | Inhoud HTML | Inhoud CSS | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 2 augustus 2018