JS - Document openen via keuzelijst

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">
<SELECT NAME="documentkeuze" onchange="openURI()">
<OPTION VALUE=" " SELECTED>Kies document</OPTION>
<OPTION VALUE="js-sel1b.htm">Document 1</OPTION>
<OPTION VALUE="js-sel1c.htm">Document 2</OPTION>
<OPTION VALUE="js-sel1d.htm">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="http://www.dsdelft.nl/html/script.htm">Scripts</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.forms[0].documentkeuze;
if (control.options[control.selectedIndex].value != ' ') {
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 geeft "forms[0]" aan dat het gaat om het eerste formulier in het document (de nummering gaat in de volgorde waarin de formulieren in het document staan en start met "0"), terwijl "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">
<!--

document.write('<FORM ACTION="geen_actie">');
document.write('<SELECT NAME="documentkeuze" onchange="openURI()">');
document.write('<OPTION VALUE=" " SELECTED>Kies document<\/OPTION>');
document.write('<OPTION VALUE="js-sel1b.htm">Document 1<\/OPTION>');
document.write('<OPTION VALUE="js-sel1c.htm">Document 2<\/OPTION>');
document.write('<OPTION VALUE="js-sel1d.htm">Document 3<\/OPTION>');
document.write('<\/SELECT>');
document.write('<\/FORM>');

//-->
</SCRIPT>

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


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="js-sel2b.htm" NAME="boven">
<FRAME SRC="js-sel2c.htm" 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.forms[0].documentkeuze;
if (control.options[control.selectedIndex].value != ' ') {
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.forms[0].documentkeuze;
if (control.options[control.selectedIndex].value != ' ') {
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.forms[0].documentkeuze;
if (control.options[control.selectedIndex].value != ' ') {
URI = control.options[control.selectedIndex].value;
window.open(URI, "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   Inhoud Handleiding HTML   Overzicht JavaScript voorbeelden   Inhoud JS - Keuzelijsten


De gebruikte style sheets voldoen aan CSS 2 Dit document voldoet aan HTML 4.01 Laatste wijziging 25 juli 2000
Copyright © 1995-2000 Hans de Jong