Listbox met landen-namen
Op sommige websites kom je formulieren tegen met daar in een listbox waar je een land uit kunt kiezen. Dat
ziet er heel spectaculair uit, maar dat is het niet. Het is alleen veel programmeerwerk om er een te maken.
Dit soort listboxen bevat gewoonlijk engelstalige namen. Hier onder staat er een die helemaal in het
Nederlands is.
Bij het openen van deze bladzijde staat het land op "Nederland".
Dit kun je veranderen.
Je kunt de code downloaden om zelf te gebruiken, zie onderaan deze bladzijde.
- Er worden twee items besproken:
- Inbouwen in je eigen website
- Interpreteren van het value-attribuut
- Deze lijst is gebaseerd op de internationale standaard ISO 3166. Alleen de twee-lettercodes van
de landen worden hier gebruikt.
- De listbox is gemaakt met behulp van de tags <select> en <option>, zoals dat bij elke listbox gebeurt.
- De hier gebruikte lijst heeft een enkelvoudige keuzemogelijkheid: Je kunt maar één land kiezen. De gemaakte keuze wordt overgedragen via het value-attribuut van de <option>-tag. Hier voor wordt de 2-lettercode uit ISO 3166 gebruikt.
- Omdat er veel keuze mogelijkheden zijn (meer dan 240) wordt de lijst erg lang als hij over het scherm wordt uitgerold. Gelukkig is er een scrollbalk als de lijst niet op het scherm past.
- De huidige HTML-standaard geeft een mogelijkheid om dat aan te passen door het gebruik van het attribuut
size="...". Daarmee stel je het aantal regels in dat de listbox toont. De listbox is nu
geen uitrolmenu meer, maar heeft een vaste grootte op het scherm. Zie ook het item Listbox met enkelvoudige en meervoudige keuzemogelijkheid.
- De code van de listbox vind je in de file select.txt, die staat in de downloadfile. De code hoeft niet te worden gewijzigd om hem te kunnen gebruiken. Eventueel kun je het attribuut selected verplaatsen naar een ander land of verwijderen (staat nu bij Nederland).
- Kopiëer de inhoud van select.txt naar een geschikte plaats binnen een formulier in je HTML-code.
- Voor het gekozen land kun je zowel de de 2-lettercode als volledige naam uit de listbox ophalen. Daarvoor
zijn twee JavaScript functions beschikbaar: LandCode() en LandNaam().
Deze functions wordt op deze bladzijde ook gebruikt om de tekst onder de listbox aan te passen. De functions LandCode() en LandNaam() staan in de file landnaam.js, die vind je ook in de downloadfile. - Als je LandCode() en LandNaam() niet gebruikt mag het attribuut id="LandSelectie"
uit de <select>-tag verwijderd worden.
- De listbox maakt deel uit van een formulier en heeft daarom een name. Deze kan desgewenst worden gewijzigd.
- Om de functies LandCode() en LandNaam() goed te laten werken heeft de listbox een id, dat niet mag worden gewijzigd!
Gebruik:
- De code van de JavaScript function staat in de <HEAD>.
- De code van de listbox staat in een formulier in de <BODY>, op de plaats waar die nodig is.
- De code waarmee de JavaScript functions worden aangeroepen kan zowel in de <HEAD> als in de <BODY> staan, op de plaats waar die nodig is.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>)
(Zet dit in de <BODY>, in een formulier)<script src="landnaam.js"></script>
<select name="LandSelectie" id="LandSelectie">
<option value="AF">Afghanistan</option>
.
.
. (Dit is de inhoud van file select.txt)
.
.
<option value="CH">Zwitserland</option>
</select>
Downloaden:
Druk op de knop:
File: voorb165.zip, 3155 bytes.
Opmerking:
Politieke verschuivingen kunnen tot gevolg hebben dat namen van landen veranderen, verdwijnen of dat er
juist nieuwe namen ontstaan. Dan wordt de lijst in ISO 3166 aangepast. De lijst op deze website geldt voor
de situatie op 30 januari 2023, maar zal door de tijd worden ingehaald.
