Listbox met enkelvoudige en meervoudige keuzemogelijkheid
Als je in een formulier één enkele keuze wilt laten maken uit een (lange) lijst mogelijkheden, kun je dat doen met een listbox met een enkelvoudige keuzemogelijkheid. Een voorbeeld daarvan is te vinden in het item listbox met landennamen.
Voor sommige toepassingen is één enkele keuze niet voldoende. Stel: je vraagt de bezoekers van je website welke accessoires de "ideale auto" heeft. Veel van de bezoekers zullen meer dan één antwoord willen geven. Je kunt dat oplossen met een serie checkboxen, maar als er veel mogelijkheden zijn is dat niet handig. Dan kun je beter een listbox met een meervoudige keuzemogelijkheid inzetten.
Op deze bladzijde wordt beschreven hoe je een en ander aanpakt.
- Er worden twee items besproken:
- Code van de twee soorten listbox
- Verwerken van de keuzes uit de listbox
- Hieronder staat een voorbeeld waarmee de verschillen worden getoond. Kies één item uit
de gewone listbox en twee of drie uit de meervoudige. Als op Laat Zien klikt verschijnt de keuze
in een alert.
Een meervoudige keuze maak je op dezelfde manier als je in Windows Verkenner bestanden selecteert: Klik op een item, klik op het volgende item met deShift- ofControl-toets ingedrukt.
- Om de keuzes te verwerken moet bij een meervoudige listbox een button of iets dergelijks worden gevoegd. Hiermee kan een JavaScript-function worden gestart die de verwerking doet. Meestal zal dit een submit-button zijn, zoals op deze bladzijde. Bij een gewone listbox kan het ook anders!
- Op het voorblad website worden twee gewone listboxen gebruikt om mee te kiezen, een programma of een
hyperlink. Zodra je een keuze hebt gemaakt wordt deze uitgevoerd. Dat gebeurt met de event-handler onchange="....".
Bij een meervoudige listbox is dat niet handig. Zodra je er een keuze is gemaakt wordt de event-handler geactiveerd en is er geen mogelijkheid meer voor een tweede, derde, vierde, enz. keus. Niet doen dus, tenzij je de meervoudige listbox voor een enkelvoudige keus wilt inzetten.
- Merk op dat een listbox altijd een onderdeel is van een formulier. De tags <select> .... </select>
zijn dus omsloten door <form> .... <form>-tags. Op deze bladzijde staan beide listboxen in
hetzelfde formulier:
<form action="JavaScript:LaatKeuzeZien()" name="Formulier"> - In plaats van name kun je ook id gebruiken. Aan te raden is consequent name of id
te gebruiken door het hele formulier.
- De JavaScript code om de omschrijvende tekst uit de enkelvoudige listbox op te halen is:
var x = document.Formulier.Box1;
N.B.: x is een hulpvariabele die alleen dient om de code leesbaar te houden.
var str = x.options[x.selectedIndex].text;
Om het value-attribuut uit de options op te halen gebruik je:var str = x.options[x.selectedIndex].value;
- Om de omschrijvende tekst uit de meervoudige listbox op te halen is wat meer werk nodig. Je moet
van alle items in de listbox apart nagaan of het geselecteerd is of niet. De JavaScript code is:
var x = document.Formulier.Box2;
Aan het eind van deze actie bevat str een lijst met de omschrijvende teksten van de geselecteerde items, gescheiden door punt-komma's. Desgewenst kun je die weer in een Array zetten met behulp van de JavaScript string methode split.
var str;
for (i=0; i<x.options.length; i++) {
if (x.options[i].selected) {
if (str.length > 0) str += ";"
str += x.options[i].text;
}
}
Ook hier kun je een lijst maken van de value-attributen van de geselecteerde options door text te vervangen door value.
Gebruik:
- De JavaScript code staat bij voorkeur in een function in de <HEAD>.
- De HTML-code staat in de <BODY>, op de plaats waar die nodig is.
Opmerking:
Het is mogelijk om items in een listbox samen te nemen in een 'groep'. Bij lange lijsten is dat duidelijker. Zie het item
Lange lijsten groeperen met <optgroup>.
