HTML - Een selectbox maken


Een selectbox waarvan hieronder een voorbeeld kan gebruikt worden in bijvoorbeeld formulieren om een bepaalde keuzemogelijkheid aan te bieden aan bezoekers.

Het maken van een selectbox gaat als volgt. De code start en sluit met <select. In dit geval is het een selectbox met links en daarom staat in de bovenste regel een onchange code die zorgt dat zodra een item wordt gekozen deze link ook daadwerkelijk geopend wordt.

Eronder zie je dan de items van de selectbox beginnend met de code, <option met value=" erachter. Achter de value=" komt dan de link te staan van de optie. Tussen de opening en de sluiting komt dan de tekst die je op de pagina zelf terug zal zien. Dan zie je in de onderstaande code nog selected="selected" staan. Hiermee geef je aan dat deze waarde, in het onderstaande geval Kies hieronder een link, standaard in beeld getoond zal worden.

<select onchange="document.location.replace(this.value);">
        <option selected="selected">Kies hieronder een link</option>
        <option value="http://www.websonic.nl">www.websonic.nl</option>
</select>




Indien je een selectbox gebruikt in een formulier dan dient onChange="document.location.replace(this.value);" weggelaten te worden. De gemaakte keuze wordt meegenomen in het formulier wat wel afhankelijk is van de afhandeling.

<select>
        <option selected="selected">Kies hieronder een kleur</option>
        <option value="Rood">Rood</option>
</select>




Multiple

Aanvullend kan er ingesteld worden dat er meerdere keuzen gemaakt mogen worden. In het geval dat een meervoudige selectie is ingesteld dan kunnen meerdere items aangeklikt worden door de CTRL toets in te houden tijdens het klikken. Het gaat om "multiple"

<select "multiple">
<option>Kies hieronder een kleur</option>
        <option value="Rood">Rood</option>
        <option value="Blauw">Blauw</option>
        <option value="Groen">Groen</option>
</select>