Dropdown

HTML-delen af en Select

En dropdown menu foldet ud

En select er oprindelig en del af en form til at indsende værdier med, men kan også anvendes i javaScript. Selecten har en en række valgmuligheder det lægges ind som options, som vist i eksemplet her:

<select id="mySelect">
<option>Vælg noget her</option>
<option value=600>Løbe</option>
<option value=150>Gå</option>
<option value=400>Cykle</option>
<option value=20>Sove</option>
</select>

Mulighederne i Option

Som det kan ses ovenfor, så skal en option have et tekstindhold - det er det der vises som de forskellige punkter når man folder sin dropdown ud.

Man kan sætte en value på hver option, så man kan vælge ud fra en tekst, og få en tilhørdende værdi ud.

Man har også mulighed for at styre hvilken option der skal vises når siden loades, ved at man sætter selected="selected" på som egenskab på optionen.

At anvende select i javaScript

For at få fat i select-objektet bruger man document.getElementById som vist her:

document.getElementById("mySelect")

For at få fat i den option der er valgt skal man have fat i selectedIndex og arrayet options på følgende vis:

var index = document.getElementById("mySelect").selectedIndex;
var optList = document.getElementById("mySelect").options;

Med de to variabler som ovenfor, så kan man hente teksten og værdien ud af den valgte option som vist her:

tekst = optList[index].text
vaerdi = optList[index].value

Eksempel på anvendelse af dropdown

For at illustrere hvordan man med javaScript kan trække værdier ud af en select kan man på selecetn fra starten af siden anvende følgende funktion:

function displayResult() {
	var index = document.getElementById("mySelect").selectedIndex;
	if (index == 0) {
		alert("Du skal vælge noget i DropDown menuen.");
	} else {
		var optList = document.getElementById("mySelect").options;
		alert("Det valgte punkt var: " + optList[index].text);
		alert("Det valgte punkts index-nummer var: " + optList[index].index);
		alert("Det valgte punkts værdi var: " + optList[index].value);
	}
}

Hele ekesemplet kan hentes i en ZIP-fil som select-dropdown.html.

Et andet eksempel på select-dropdown

Her er HTML-selecten lagt ind i en form

<form name="myForm">
Option: 
	<select id="selectDrop" onChange="autoSel()">
		<option selected="true" value="0">Vælg en select</option>
		<option value="1">Input selection 1</option>

		<option value="2">Input selection 2</option>
		<option value="3">Input selection 3</option>
		<option value="5">Input selection 4</option>
	</select><br />
	<input type="button" onClick="testFormular();" value="Test formularen">
	<input type="reset" name="InRes" value="Reset" /><br />
</form>

Der trækkes værdier ud af selecten på to måder.

Den ene er når der vælge noget nyt i selecten, ved at der er sat en onChange eventhandler til at kalde autoSel(), der laver følgende:

function autoSel() {
	alert("Valgt værdi: " + document.getElementById("selectDrop").value);
}

Den anden måde er at man klikker på knappen Test Formularen, der så kalder testFormular(), som indeholder følgende:

function testFormular() {

	sel = document.getElementById("selectDrop"); // Etabler kontakt til Dropdown boxen
	val = sel.value;	// Hent værdien
	tekst = sel.options[sel.selectedIndex].text;	// Hent teksten fra visningen
	alert("Teksten i den valgte option er: " + tekst);
	alert("Værdien der ligger i den er: " + val);

	// Formen resettes for brugeren
	myForm.reset();
}

Der er illustreret to måde at nulstille formularen på, nemlig illustreret i slutningen af testFormular(), hvor metoden reset() anvendes på myForm (name på formularen).
Den anden måde er hvor man har en Reset button på formularen.

Hele eksemplet kan hentes i en ZIP-fil som select-form.html.

Dynamisk anvendelse af Select

Hvis man ønsker det, så kan man gøre selecten dynamisk ved at man tilføjer eller fjerner elementer fra den, så man kan tilpasse dens indhold løbende.

Det gør man ved hjælp af to metoder på en select, nemlig add() og remove()

sel.add(option, før);
sel.remove(index);

Når man vil tilføje en option, så skal den først dannes ved hjælp af createElement("option"), og den skal så have et indhold, så den kan blive synlig. Det gør man ved:

	var opt=document.createElement("option");
	opt.text="Kiwi";
	opt.value = val;

Når man har dannet optionen, så kan man sætte den ind i selecten, og det er lidt mere kompliceret, da det er browser-afhængigt, og her vises det med en try-catch struktur.

	try {
		// for IE earlier than version 8 and other browsers
		sel.add(option,x.options[null]);
	}
	catch (e) {
		sel.add(option,null);
	}

Ved at angive null får man indsat optionen i slutningen af selecten. Hvis man vil indsætte den før, så angiver man indexet hvor den skal sættes ind (husk at rette begge steder).

Hvis man så vil fjerne et element i selecten, så kan man bruge remove, hvor man som parameter angiver det index man vil fjerne.

Et eksempel kan hentes i en ZIP-fil som select-add.html.

Webcode
JavaScript	for - while - do while - for in - løkke - løkker i løkker - if - if-else - else-if - Conditional - Switch - break - continue - Funktion - Return - Returværdi - Rekursion - Sekvens - Javascript strukturer
js Input	Checkbox - Dropdown - Form - Input button - Input filter - Input password - Input text - Textarea - submit knap - Option - Prompt - Confirm - Radio button - Select - Input-Tag - Keyboard event
js Output	Alert - Document.write - Frameset output - Objekt egenskaber - Objekt output - Text-felt til output - Vindue output - Billed egenskaber - Canvas
js Syntaks	Arrays - Betingelse - Identifyer - Variabel - Variabel scope - Type - Sekvens
js Objekt	Canvas - Billed egenskaber - Egne objekter - Events - HTML-objekter - Keyboard event - Event-handler - Browser detektering - Preload images - Document Object Model
Tid i JavaScript	Date objektet - setTimeout - setInterval
PHP	Header - Include