Brugere lige nu: 18
Siden er opdateret 28.7.2008
Tilføj og fjern options fra en selectboks:
I sidens head anbringes et kald til et ekstern javascript - lagt eksternt for at siden kan validere:
<script type="text/javascript" src="tilfojsletvis.js"></script>
Indholdet af denne eksterne scriptfil definerer nogle funktioner og variabler:
function addOption(text,value,box) {
if(text) {
var opt = new Option(text,value);
var count = box.options.length;
box.options[count] = opt;
} else {
alert("Du skal skrive en optiontekst, for at kunne tilføje");
}
}
function removeOption(box) {
try {
if(box.options[box.selectedIndex])
box.options[box.selectedIndex] = null;
else
alert("Du skal vælge en option, for at kunne fjerne den");
} catch (e) {
//exception thrown when user has not selected an option
alert("Du skal vælge en option, for at kunne fjerne den");
}
}
function showOption(box) {
try {
var out = "Option text = ";
out += box.options[box.selectedIndex].text;
out += "\n";
out += "Option value = ";
out += box.options[box.selectedIndex].value;
alert(out);
} catch(e) {
//exception thrown when user has not selected an option
alert("Du skal vælge en option, for at kunne få dens værdi vist");
}
}
Endelig er der formularen, som også indholder lidt javascript:
<form method="get" action="#" id="frmNyOption">
<fieldset>
<legend>Husk både tekst og værdi ved tilføjelse</legend>
<label for="t1">Ny optiontekst</label>
<input type="text" id="t1" name="otext" /><br />
<label for="t2">Ny optionværdi</label>
<input type="text" id="t2" name="oval" /><br />
<label for="tilfoj"> </label>
<input type="button" id="tilfoj" onclick="addOption(document.forms['frmNyOption'].elements['otext'].value,
document.forms['frmNyOption'].elements['oval'].value,
document.forms['frmNyOption'].elements['test'])" value="Tilføj option" /><br /><br />
<label for="t4"> </label>
<select id="t4" name="test" size="20">
<option value="option værdi">option-tekst</option>
</select>
<label for="rem"> </label>
<input type="button" id="rem" onclick="removeOption(document.forms['frmNyOption'].elements['test'])" value="Fjern option" />
<input type="button" onclick="showOption(document.forms['frmNyOption'].elements['test'])" value="Vis option" />
</fieldset>
</form>
Bemærk, at javascriptet i alle tre knapper skal skrives i en ubrudt linje uden mellemrum, selv om jeg i første tilfælge har 'klippet' det over i tre bidder!